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WPF 是 微软 新 一 代 开 发 技术 ， 涵 盖 了 桌面 应 用 程序 开发 、 网 络 应 用 程 
序 开 发 和 移动 应 用 程序 开发 ， 是 微软 开发 技术 未 来 十 年 的 主要 方向 。 
本 书 的 内 容 分 为 两 大 部 分 。 第 一 部 分 是 学 习 WPF 开 发 的 基础 知识 ， 包 
括 XAML 语 言 的 详细 剖析 、WPF 控 件 的 使 用 、 用 户 界 面 布 局 的 介绍 。 
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据 关 联 、 路 由 事件 与 命令 、 数 据 模板 与 控件 模板 、 绘 图 与 动画 等 。 
本 书 作 者 具有 多 年 WPF 开 发 经 验 ， 历 经 多 个 大 型 项 目 ， 现 任 微软 GE 
=) 下 载 中心 项 目 组 高 级 开发 工程 师 。 本 书 是 作者 多 年 来 学 习 和 使 用 
WPF 的 经 验 总 结 。 


本 书包 含 了 众多 WPF 面 试点 ， 作 者 凭借 书 中 的 知识 顺利 通过 微软 (E 
国 ) 的 面试 。 
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写作 经 起 


本 书 的 写作 缘起 几 年 前 我 学 习 WPF。 因 为 我 是 从 Windows Forms 开 发 转 
来 做 WPF 开 发 的 ， 学 习 过 程 中 遇 到 很 多 新 概念 、 新 特性 ， 其 中 包括 
Data Binding、 路 由 事件 、 人 命令、 各 种 模板 等 。 我 的 工作 风格 是 对 于 每 
个 新 知识 ， 一 定 先 把 它 理解 透彻 、 搞 明白 再 应 用 于 项 目 中 ， 不 然 总 感 
觉 使 用 起 来 不 放心 ， 于 是 加 对 照 已 有 的 英文 书籍 和 MSDN 逐 一 研究 这 
些 知 识 点 。 每 有 所 得 ， 都 喜欢 写成 博客 发 表 在 网 上 ， 一 来 供 大 家 学 习 
参考 ， 二 来 做 一 个 积累 、 防 止 以 后 各 筷 。 博 客 发 表 之 后 收 到 很 多 读者 
的 反馈 和 亦 励 ， 大 家 硕 望 我 能 把 这 些 文章 编撰 成 册 、 形 成 一 本 学 习 教 
材 ， 于 是 我 下 决心 开始 写 这 本 书 。 这 本 书 的 名 字 也 束 随 了 系列 博客 文 
章 的 名 字 一 一 《深入 浅 出 WPF》。 


之 所 以 叫 “ 深 入 浅 出 ”， 原 因 有 两 个 。 名 为 “深入 ”， 是 想 把 WPF 也 诠释 一 
番 ， 所 以 书 中 的 每 个 例子 都 有 可 供 训 析 的 实例 ， 对 于 一 些 重要 概念 ， 
我 通过 分 析 WPE 的 源 代 码 给 予 阐述 (NET Framework 的 部 分 源 代 码 是 
向 开发 人 员 开 放 的 ， 其 中 就 包含 WPF 的 源 代码 ) 。 名 为 “ 浅 出 ”*， 是 因 
为 几乎 每 个 概念 我 都 会 用 生活 中 浅显 易 懂 的 例子 进行 类 比 ， 让 读者 可 
以 轻松 理解 ， 降 低 学 习 抽 象 知识 的 痛 首 。 


为 本 书 起 这 个 名 字 ， 也 是 出 于 我 对 《深入 浅 出 MFC》 这 本 书 的 景仰 之 
情 。 我 刚刚 开始 学 编程 的 时 候 正 是 MFC 流 行 的 年 代 ，《 深 入 乒 出 
MFC》 这 本 书 给 我 的 学 习 风 格 打下 了 深 深 的 烙印 。 其 中 对 我 影响 最 深 
刻 的 ， 一 个 是 它 对 MFC 源 码 的 分 析 ， 男 一 个 是 “ 勿 在 浮 沙 筑 高 合 、 几 
事 必 完 其 理 的 探索 精神 。 在 后 来 的 近 十 年 工作 中 ， 分 析 和 学 习 微 软 开 
发 框架 的 源码 成 为 我 工作 的 方法 论 。 本 书 中 包公 了 一 些 对 WPF 源 码 的 
分 析 ， 帮 助 大 家 对 WPF 有 个 透彻 的 理解 。 我 以 《深入 浅 出 MFC》 一 书 
为 准绳 和 鞭策 目 己 的 力量 ， 布 望 能 为 大 家 奉 上 一 本 有 用 的 好 书 。 


写 博客 容易 ， 写 书 难 。 写 博客 ， 内 容 上 可 以 不 那么 连贯 、 不 太 挛 还 ， 
SEMAT, ERKEN RA RAAE o ATE, AE 
写 了 满 满 一 篇 之 后 感觉 不 满意 又 删 掉 重 来 ， 直 到 我 认为 初级 读者 也 能 
顺畅 理解 为 止 。 多 少 个 不 眠 之 夜 束 是 在 这 种 字 鞭 句 酌 中 转瞬 即 浪 ， 一 
年 下 来 ， 头 上 也 冒 出 了 很 多 日 发 。 我 想 ， 既 然 写 书 ， 那 殉 要 把 目 己 的 
心血 奉献 给 读者 ， 这 样 才 对 得 起 读者 也 对 得 起 自己 。 


本 书 并 不 是 一 本 大 而 全 的 WPF 至 典 ， 而 是 WPF 在 实际 工作 中 用 到 最 多 
的 部 分 。 所 以 在 “轻松 幽默 、 深 入 浅 出 ”的 风格 基础 上 ， 本 书 力求 实 
用 。 写 书 的 过 程 其 实 也 是 对 WPF 进 行 深耕 的 过 程 ， 本 书写 作 过 半 了 时， 

我 偶然 获得 一 个 机 会 可 以 参加 微软 的 一 个 开发 项 目 ， 面 试 我 的 是 美国 


微软 的 一 位 高 级 项 目 经 理 (现在 是 我 的 老板 ) ， 面 试 的 内 容 就 是 WPF 
开发 。 我 基本 上 都 是 用 书 中 的 原 话 作答 ， 十 分 顺利 一 一 我 获得 了 来 美 
国 工 作 的 机 会 ， 目 前 负责 微软 下 载 中心 管 理工 具 的 开发 。 我 想 ， 这 也 
算是 对 本 书 内 容 的 一 次 检验 ， 囊 心 希望 大 家 在 学 习 完 这 本 书 中 的 内 容 
后 也 能 在 自己 的 职业 发 展 上 获得 进步 。 


毕竟 我 的 水 平 有 限 ， 尽 管 下 力气 去 写 但 还 是 感觉 很 粗浅 ， 有 些 知识 超 
出 微软 官方 文档 的 履 盖 ， 我 也 融入 一 点 目 己 的 判断 ， 对 WPF 源 码 的 阅 
读 也 是 在 探索 中 前 行 ， 所 以 ， 书 中 芷 漏 之 处 再 所 难免 。 和 硕 望 大 家 能 够 
多 多 给 予 宽 容 并 提出 宝贵 的 建议 。 我 将 在 本 书 的 后 续 版 本 中 不 断 丰 富 
内 容 、 修 改 错误 ， 让 这 本 书 成 为 一 本 “ 活 书 *”、 一 直 为 大 家 服务 下 去 。 
本 书 的 纠 错 及 更 正 将 发 布 在 http://www.cnblogs.com/prism。 我 的 MSN 是 
wpfgeek@live.com， 期 得 与 热爱 WPF 拉 术 的 朋友 共同 学 习 和 探讨 。 


WPFZ What & Why 


自古 以 来 ,生产 工 具 就 代表 着 生产 力 的 先进 程度 一 一 生产 力 的 发 展 要 
求人 们 不 断 研 发 出 新 的 生产 工具 ， 痢 生产 工具 的 诞生 又 使 生产 效率 出 
现 飞 路 。 作 为 劳动 生产 的 一 种 ， 计 算 机 软件 开发 也 需要 工具 ， 随 着 程 
序 员 们 手中 的 工具 越 来 越 强 大 ， 软 件 开 发 的 效率 和 质量 也 越 来 越 高 。 
Ec HEN ` 者 技术 的 程序 员 们 也 总 是 能 得 到 更 多 的 实 


微软 Windows 操 作 系 统 成 功 推出 已 有 十 多 年 ， 在 Windows 系 统 平 台 上 从 
事 图 形 用 户 界 面 (Graphic User Interface, GUI) 程序 开发 的 程序 员 数 不 
胜 数 。GUI 程 序 员 们 手中 的 开发 工具 历经 了 Win32 API2 MEC. (及 同类 
产品 ) 一 ActiveX/COM/Visual Basic > Windows Forms 的 变迁 ， 每 一 次 变 
迁都 使 开发 效率 和 质量 产生 飞跃 。 从 2007 年 开始 ， 微 软 推出 了 它 的 新 
一 代 GUI 开 发 工具 Windows Presentation Foundation ( Ei i€ 7j Windows 
示 基 础 ，WPF) ， 并 且 把 WPF 定 为 未 来 十 年 Windows 平 台 GUI 开 发 的 主 
要 技术 。 时 至 今日 ， 不 但 Windows Vista ` Windows 7 ` Windows Server 
2008 ` Windows Server 2008 R2 等 系统 已 经 无 颖 集成 了 WPF， 连 Visual 
Studio 2010 等 重要 产品 业已 使 用 WPF 进 行 开发 。 可 见 微软 在 WPF 技 术 
方面 的 务实 精神 与 决心 。 


什么 是 WPF 


WPF 是 windows Presentation Foundation 的 简称 ， 顾 名 思 义 是 专门 用 来 编 
写 程序 表示 层 的 技术 和 工具 。 


WPF 是 做 什么 用 的 呢 ? 让 我 们 从 分 析 一 个 客户 的 需求 开始 ， 解 答 这 个 
问题 。 经 常会 有 一 些 朋友 找 我 写 项 目 ， 有 一 次 ,一 家 医疗 单位 的 技术 
主管 找到 我 说 :“ 你 能 不 能 用 WPF 为 我 们 开发 一 套 管理 系统 呀 ? ”其 
实 ， 这 束 古 一 个 对 WPF 的 典型 误解 。 旋 解 在 何 处 呢 ? 主 要 是 没有 弄 消 
WPF 的 功用 。 当 今 的 程序 ， 除 了 一 些 非 常 小 巧 的 实用 工具 外 ， 大 部 分 
程序 都 是 多 层 架 构 的 程序 。 一 提 到 多 层 架 构 ， 一 般 就 至 少 包 含 3 层 ， 数 
据 层 、 业 务 逻 辑 层 和 表示 层 (它们 的 关系 如 图 1 所 示 ) 。 


机 程序 ”桌面 程序 ”浏览 器 程序 
表示 层 
| | 
DA 


E | 业务 逻辑 层 


这 3 层 的 功能 大 致 如 下 : 


e 数据 层 ， 用 于 存储 数据 ， 多 由 数据 库 构 成 ， 有 时 候 也 用 数据 文件 能 
辅助 存储 数据 。 比 如 医院 的 药品 列表 、 人 员 列 表 、 病 例 列表 等 都 存储 


TE cm 


e 业务 逻辑 层 : 用 于 根据 需求 使 用 计算 机 程序 表达 现实 的 业务 逻辑 。 
比如 哪些 医生 可 以 给 哪些 病人 看 病 ， 从 挂号 到 取 药 都 有 什么 流程 ， 从 
住院 到 出 院 有 哪些 流程 ， 都 可 以 由 这 层 来 实现 。 这 一 层 一 般 会 通过 一 
组 服务 (Service) 向 表示 层 公开 自己 的 各 个 功能 。 因 为 这 一 层 需要 与 
数据 层 进行 交互 ， 所 以 经 常会 划分 出 一 个 名 为 “数据 访问 层 ”(Data 
Access Layer, DAL). 的 子 层 专门 负责 数据 的 存 取 。 


e 表示 层 : 负 贡 把 数据 和 流程 展示 给 用 户 看 。 对 于 同一 组 来 目 业 务 逻 
辑 层 的 数据 ， 我 们 可 以 选择 多 种 表达 方式 。 比 如 对 于 同一 张 药 品 单 ， 

如 果 想 以 短信 的 形式 发 送 给 药房 ， 可 以 以 一 串 字 符 的 形式 来 表达 ; 如 
果 客 户 想 打印 药品 单 的 详细 内 容 ， 可 以 以 表格 的 形式 来 表达 ;， 如 来客 
尸 想 直观 地 看 到 每 种 药品 占 总 价格 的 比例 ， 我 们 可 以 使 用 饼 图 来 表 
达 。 除 了 用 于 表示 数据 ， 表 示 层 还 人 负责 展示 流程 、 啊 应 用 户 操 作 等 。 
而 且 ， 表 示 层 程序 并 不 拘泥 于 桌面 程序 ， 很 多 表示 层 程序 都 运行 在 手 
机 或 浏览 器 里 。 表 示 层 程序 也 和 常 被 称 为 客户 端 程序 。 


WPF 的 功能 就 是 用 来 编写 应 用 程序 的 表示 层 ， 至 于 业务 逻辑 层 和 数据 
层 的 开发 也 有 专门 的 新 技术 。 比 如 业务 逻辑 层 的 新 技术 是 WwWCEF 

( Windows Communication Foundation) 和 WF ( Windows Workflow 
Foundation) 。 微 软 平 台 上 用 于 开发 表示 层 的 技术 不 算 少 ， 包 括 WPF、 
Windows Forms、ASPNET 、Silverlight 等 。 换 名 话说， 无 论 使 用 哪 种 技 
术 作 为 表示 层 技 术 ， 程 序 的 逻辑 层 和 数据 层 都 是 相同 的 。 所 以 “使 用 
WPF 开 发 管理 系统 ”这 个 提 法 是 不 对 的 。 


WPF 与 Silverlight 的 关系 


目前 ，.NET 开 发 人 员 学 习 WPF 的 回报 是 相当 高 的 ， 原 因 是 几乎 整个 微 
软 新 一 代 开 发 框架 都 能 看 到 WPE 的 影子 。 微 软 的 新 一 代 开 发 技术 框架 
包 括 Windows Presentation Foundation ( WPF ) >œ Windows 
Communication Foundation ( WCF) I Windows Workflow Foundation 
(WF， 据 说 因为 与 World Wildlife Fund 的 缩写 WWF 冲 突 了 ， 所 以 去 掉 
了 一 个 W) 。 本 书 无 疑 是 讲 WPF， 而 WCF 的 用 途 是 编写 分 布 式 应 用 程 
序 的 业务 逻辑 层 ， 并 以 网 络 服务 的 形式 又 露 给 客户 端的 服务 消费 者 ， 
基于 WCF 和 Entity Framework 的 WCF Data Service 和 WCF RIA Service 是 
微软 运 今 最 佳 的 数据 访问 层 ， 而 这 一 数据 访问 层 的 最 佳 消 费 者 就 十 
WPF 和 Silverlight。 所 以 ， 学 习 WPF 技 术 可 以 为 WCEF 的 学 习 锦 上 添 花 。 


WE 的 主要 作用 是 设计 工作 流 ， 而 设计 工作 流 的 编程 语言 正 是 WPF 中 的 
We — RANG 也 就 是 说 ， 学 习 完 WPFE，WF 也 会 了 一 小 


如 有 果 说 学 会 VPF 后 WF 算 是 会 了 一 人 小半， 那么 学 习 完 WPF 后 ，Silverlight 
可 以 算是 会 了 802% ， 为 什么 这 么 说 呢 ? EU WE Silverlight 
是 WPF 的 一 个 子 集 、 是 WPF 的 “网 络 版 ”(Silverlight 的 开发 代号 是 
WPEFE， 意 为 WPF 简 化 版 ) 。 为 了 让 WPF 在 浏览 器 里 跑 起 来 ， 微 软 所 
做 的 事情 就 是 在 技术 理念 不 变 的 情况 下 对 WPF 进 行 “ 瘦 映 ” 一 去 掉 一 
些 不 常用 的 功能 、 简 化 一 些 功 能 的 实现 ， 对 多 组 实现 同一 目的 的 类 库 
进行 删 减 、 只 保留 一 组 ， 再 添加 一 些 网 络 通 信 的 功能 。 通 过 下 表 ， 我 
i AREA Fl Silverlight WPF RRE R KZ A: 


技术 项 目 ft Silverlight 中 
XAML 语言 完整 完整 
e et 
Ai E 
Binding 完整 基本 完整 
依赖 属性 完整 基本 完整 
路 由 事件 m 
资源 ut 
控件 模板 完整 基本 完整 
tiki Kot 
绘图 完整 完整 
2D/3D 动画 完整 简化 


AS Silverlight F H 2289 A — Ii E xe SGT — IF WU 8 Windows 
Phone 7 也 采用 它 来 作为 开发 平台 (此 前 的 Windows Mobile 系 统 使 用 的 
是 简化 版 的 Windows Forms 开 发 平台 ) ° Windows Phone 7 中 运行 的 


Silverlight 与 浏览 器 中 运行 的 Silverlight 别 无 二 致 ， 因 此 学 习 完 WPF 之 后 
连 手机 平台 上 的 程序 也 会 写 了 。 


所 以 说 学 习 WPF 是 “一 本 万 利 * 的 投资 ,一 点 也 不 过 分 。 

为 什么 要 学 习 WPF 

有 的 朋友 会 问 : 既然 已 经 有 这 么 多 表示 层 技 术 ， 为 什么 还 要 推出 WPF 
技术 呢 ? 我 们 花 精 力学 习 WPEF 技 术 有 什么 收益 和 好 处 呢 ? 这 个 问题 可 
以 从 两 方面 来 回答 。 

首先 ， 只 要 开发 表示 层 程 序 就 不 可 避免 地 要 与 4 种 功能 性 代码 打交道 ， 


它们 分 别 走 : 
e 数据 模型 : 现实 世界 中 事物 和 逻辑 的 抽象 。 
e 业务 逻辑 : 数据 模型 之 间 的 关系 与 交互 。 


e HPRH: 由 控件 构成 的 、 与 用 户 进行 交互 的 界面 ， 用 于 把 数据 展 
示 给 用 户 并 啊 应 用 户 的 输入 。 


e 界面 逻辑 ， 控件 与 控制 之 间 的 关系 与 交互 。 
这 4 种 代码 的 天 系 如 图 2 所 示 。 


用 户 界面 


图 2 


在 保持 代码 可 维护 性 的 前 提 下 ， 如 何 让 数据 能 够 顺畅 地 到 达 界 面 并 有 灵 
活 显 示 ， 同 时 方便 地 接收 用 户 的 操作 历来 都 是 表示 层 开 发 的 核心 问 
题 。 为 此 ， 人 们 研究 出 了 各 种 各 样 的 设计 模式 ， 其 中 有 经 久 不 衰 的 
MVC (Model-View-Controler) 模式 、MVP (Model-View-Presenter) 模 
式 等 。 在 WPF 出 现 之 前 ，Windows Forms ` ASP.NET (Web Forms) 等 
技术 均 使 用 “事件 驱动 ”理念 ， 这 种 由 “事件 -订阅 -事件 处 理 器 ”关系 交 
织 在 一 起 构成 的 程序 ， 尽 管 可 以 使 用 MVC、MVP 等 设计 模式 ， 但 一 不 
小 心 豆 会 使 界面 逻辑 和 业务 逻辑 纠缠 在 一 起 ， 造 成 代码 变 得 复杂 难 
懂 、bug 难 以 排除 。 而 WPF 技 术 则 是 微软 在 开发 理念 上 的 一 次 升级 
由 “事件 驱动 * 变 为 “数据 驱动 ”。 


事件 驱动 时 代 ， 用 户 每 进行 一 个 操作 用 会 激发 程序 发 生 一 个 事件 ， 事 
件 发 生 后 ， 用 于 响应 事件 的 事件 处 理 器 就 会 执行 。 事 件 处 理 器 是 一 个 
方法 (KZO ， 在 这 个 方法 中 ， 程 序 员 可 以 处 理 数据 或 调用 别 的 方 
法 ， 这 样 ， 程 序 丈 在 事件 的 驱动 下 向 前 执行 了 。 可 见 ， 事 件 驱 动 时 代 
的 数据 十 静态 的 、 修 动 的 ， 界 面 控 件 是 主动 的 、 界 面 逻辑 与 业务 逻辑 
之 间 的 桥梁 是 事件 。 而 数据 驱动 正好 相反 ， 当 数据 发 生变 化 时 ， 会 主 
动 通知 界面 控件 、 推 动 控件 展示 最 新 的 数据 ;， 同 时， 用户 对 控件 的 操 
作 会 直接 送 达 数 据 ， 束 好 像 控 件 是 “透明 的。 可见， 在 数据 张 动 理念 
中 ， 数 据 占 据 主动 地 位 、 控 件 和 控件 事件 被 弱化 〈 欣 件 事件 一 般 只 参 
与 界面 逻辑 ， 不 再 染指 业务 逻辑 ， 使 程序 复杂 度 得 到 有 效 控制 ) 
WPF 中 ， 数 据 与 控件 的 关系 吏 是 哲学 中 内 容 与 形式 的 关系 一 一 内 容 决 
定形 式 所 以 数据 艳 动 界面 ， 这 非常 符合 哲学 原理 。 数 据 与 界面 之 间 的 
桥梁 是 数据 关联 (Data Binding) ， 通 过 这 个 桥梁 ， 数 据 可 以 流向 界 
面 ， 再 从 界面 流 回 数据 源 。 


简 而 言 之 ，WPF 的 开发 理念 更 符合 自然 哲学 的 思想 (除了 Data Binding 
之 外 ， 还 有 Data Template 和 Control Template 等 ， 本 书 都 将 着 力 描 述 ) 。 
a Forms 开 发 要 简单， 程序 更 加 简洁 清 
晰 。 


其 次 ， 微 软 已 经 把 WPF 的 理念 扩展 到 了 几乎 全 部 开发 平台 ， 包 括 桌 面 
平台 、 浏 览 器 平台 和 手机 平台 。WPF 的 完整 版 可 用 于 在 Windows 平 台 上 
开发 桌面 应 用 程序 (这 些 桌 面 应 用 程序 也 可 以 运行 在 浏览 器 中 ) ; 
WPF 的 “简化 版 ?， 也 就 是 Silverlight， 不 但 可 以 用 于 编写 运行 在 浏 贤 絮 
中 富 客户 端 程序 (Rich Internet Application) ， 也 可 以 用 于 编写 运行 于 


微软 最 新 手机 平台 Windows Phone 7 中 的 程序 。 所 有 这 些 程序 的 开发 理 
念 都 是 一 样 的 ， 仅 在 类 库 方 面 有 细微 的 差别 ， 也 束 是 说 ， 学 会 WPF 开 
发 ，Silverlight 开 发 和 Windows Phone 77F A 35] n] ARR 2538. o Br ELSE 2] 
WPF 的 发 展 前 景 非常 好 、 回 报 很 大 ， 投 入 些 精 力 是 非常 值得 的 。 


最 后 ， 为 大 家 提供 一 个 微软 官方 集 动画 和 效果 为 一 体 的 实例 ， 
photoSuru o B 载 地 址 是 : 
http://windowsclient.net/appfeeds/SubscriptionCenter/Gallery/photosuru.asp 
X o 


| 
致谢 


本 书 的 出 版 要 感谢 中 国 水 利水 电 出 版 社 万 水 分 社 的 周 春 元 编辑 。 在 整 
个 成 书 过 程 中 ， 春 元 兄 一 直 保 持 着 极 大 的 耐心 ， 忌 是 给 予 我 真诚 的 文 
持 和 鼓励 。 记 得 有 一 次 ， 我 对 上 自己 的 技术 水 平 不 够 自信 ， 春 元 兄 问 
我 :“ 你 为 什么 要 写 这 本 书 ? ”我 说 十 想 为 学 习 WPF 的 朋友 做 点 事情 、 
对 中 国 的 I 行业 做 后 推动 。 春 元 兄 说 :“ 是 啊 ! 所 以 只 要 你 尽心 尽力 、 
把 真知 奉献 给 读者 ， 束 已 经 是 在 帮助 大 家 学 习 、 实 现 上 自己 的 理想 了 。 
至 于 书 是 不 是 好 卖 ， 这 个 不 用 担心 ， 只 要 是 好 书 ， 束 算 赔 着 钱 我 们 也 
要 出 、 也 要 买 。” 当 我 思路 枯竭 的 时 候 ， 春 元 兄 从 来 没有 以 稳 期 为 由 众 
过 我 ， 只 是 长 励 我 让 我 静 下 心 来 慢 慢 写 ; 春 元 兄 也 从 来 没有 要 求 我 为 
迎合 销售 而 对 书稿 做 丝 电 改 动 ， 征 春 元 兄 儿 助 我 傈 证 了 这 本 书 是 一 本 
没有 铜 吴 、 不 掺 洒 名 利 的 书 。 


最 让 我 感动 的 是 ， 为 了 保证 本 书 的 质量 ， 春 元 兄 作为 一 个 非 计 算 机 编 
程 人 士 葛 然 通读 了 整 本 书 、 几 乎 弄 履 了 WPF 的 所 有 概念 ， 最 后 提出 了 
p HEN 有 些 意 见 甚至 精确 到 一 个 词 或 一 个 字母 


成 书 过 程 中 与 我 直接 沟通 的 是 春 元 兄 ， 但 站 在 春 元 兄 痛 后 的 是 一 个 完 
整 的 编辑 团队 一 一 他 们 默默 无 闻 地 工作 着 ， 保 证 书籍 以 最 快 的 速度 、 
最 优雅 的 阅读 体验 、 最 精美 的 印刷 与 读者 们 见面 。 在 此 ， 疝 杨 元 泓 、 
胡 海 家 、 陈 洁 等 编辑 朋友 致 以 真诚 的 感谢 。 


我 之 所 以 能 成 为 程序 员 、 成 为 技术 作者 ， 首 移 要 感谢 我 的 父母 ， 是 他 
们 培养 我 勤 于 动手 、 乐 于 思考 、 善 于 表达 。 刘 晓 林 先生 是 我 的 计算 机 
启蒙 老师 ， 如 果 没 有 他 带 我 人 DOS 学 起 ， 很 难 想象 我 会 成 为 一 名 程序 
员 。 初 中 的 李 全 兴 老 师 和 高 中 的 郭 惠 清 老师 是 两 位 对 我 影响 最 大 的 语 
文 老师 ， 没 有 二 位 老师 在 写作 方面 的 指导 和 帮助 ， 别 说 是 写 书 ， 愁 性 
写作 文 都 成 问题 。 一 路 走 来， 有 民 师 ， 还 有 益友 一 一 刘 扬 、 张 博 、 谢 
志 威 、 第 诚 等 ， 他 们 不 但 是 在 计算 机 学 习 方 面 对 我 帮助 最 大 的 朋友 ， 
也 是 我 的 知心 朋友 ， 在 此 ， 对 你 们 表示 衷心 的 感谢 ， 愿 友谊 长 青 ， 


在 成 长 过 程 中 ， 无 数 的 朋友 帮助 过 我 、 引 导 过 我 ， 众 多 的 领导 关心 
我 、 鼓 励 我 ， 在 此 一 并 表示 感谢 。 如 今 的 我 已 经 修得 在 平和 中 稳步 前 
行 ， 而 在 此 之 前 ， 很 多 前 进 的 动力 则 来 产 于 挫折 和 挑 成 ， 对 曾经 的 挫 
Ia 我 也 表示 深 深 的 感谢 一 一 感谢 你 们 让 我 思考 、 成 长 和 成 
AM o 
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于 Redmond，Microsoft Building Mil-E 


第 一 部 分 ”深入浅出 话 XAML 


XAML 概览 


1.4 XAMIL 是 什么 


目 人 类 社会 诞生 ， 社 会 分 工 就 在 不 断 地 进行 着 。 从 原始 社会 畜牧 业 与 
农业 分 离 到 当今 数 以 万 计 行业 的 存在 ， 无 不 是 社会 分 工 的 杰作 。 社 会 
分 工 的 意义 在 于 它 能 使 从 事 固 定 工作 的 人 群 更 加 专业 化 ， 并 通过 合作 
的 形式 提高 生产 效率 。 换 句 话说， 在 合作 不 是 问题 的 情况 下 ， 寿 干 群 
专业 人 士 配合 工作 要 比 同等 数量 的 一 群 * 大 而 全 ”人 士 的 工作 效率 高 。 


这 种 分 工 与 合作 的 关系 不 仅 存在 于 行业 之 间 ， 也 存在 于 行业 内 部 。 软 
件 开发 中 最 典型 的 分 工 合 作 就 是 设计 师 (Designer) 与 程序 员 


RERUM 之 间 的 协作 。 在 WPF 出 现 之 前 ， 协 作 一 般 是 这 样 展开 


(1) 需求 分 析 结 束 后 ， 程 序 员 对 照 需求 设计 一 个 用 户 界 面 (User 
Interface, UI). 的 草图 ， 然 后 把 精力 主要 放 在 实现 软件 的 功能 上 。 


(2) 与 此 同时 ， 设 计 师 们 对 照 需 求 、 考 虑 用 户 的 使 用 体验 (User 
Ro UX) 、 使 用 专门 的 设计 工具 (比如 Photoshop) 设计 出 优美 
而 实用 的 UI。 


最 后 ， 程 序 员 按 照 设计 师 绘制 的 效果 图 ， 使 用 编程 语言 实现 软件 
JUI ° 
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费 在 沟通 和 最 终 整 合 上 的 精力 也 是 巨大 的 。 经 党 出 现 的 问题 有 : 


e 设计 师 的 设计 跟 不 上 程序 逻辑 的 变化 。 

e 程序 员 未 能 完全 实现 设计 师 提 供 的 效果 图 。 
e 效果 图 与 程序 功能 不 能 完全 匹配 。 

e 从 效果 图 到 软件 UI 的 转化 耗费 很 多 时 间 。 


这 些 并 不 是 谁 对 谁 错 的 问题 一 只 要 存在 分 工 ， 合 作 的 成 本 就 不 可 能 
为 零 。 问 题 的 核心 在 于 ， 设 计 师 与 程序 员 的 合作 是 “ 串 行 * 的 ， 即 先 由 
设计 师 完成 效果 图 、 再 由 程序 员 通 过 编程 实现 。 如 果 设 计 师 能 与 程序 
员 “ 并 行 ”工作 并 直接 参与 到 程序 的 开发 中 来 ， 上 述 问题 就 解决 了 


解决 方案 是 什么 呢 ? 是 让 设计 师 们 使 用 编程 语言 来 设计 UI 效 来 图 ， 还 
是 让 程序 员 们 使 用 Photoshop 来 开发 程序 ”显然 都 行 不 通 。 


网 络 程序 开发 团队 的 经 验 倒 是 很 值得 借鉴 : 草图 产生 后 ， 设 计 师 们 可 
以 使 用 HTML、CSS、JavaScript 直 接生 成 UI， 程 序 员 则 在 这 个 UI 产生 
的 同时 实现 它 背 后 的 功能 逻辑 。 在 这 个 并 行 的 合作 中 ， 设 计 师 们 可 以 
使 用 Dreamweaver 等 设计 工具 ， 程 序 员 使 用 Visual Studio 来 进行 后 台 编 
程 。 有 经 验 的 设计 师 和 程序 员 往 往 还 具备 互 换 工 具 的 能 力 ， 使 得 他 们 
能 基于 HTML+CSS+JavaScript 这 个 平台 进行 有 效 的 沟通 。 


为 了 把 这 种 开发 模式 从 网 络 开发 移植 到 蝎 面 开发 和 富 媒 体 网 络 程序 的 
开发 上 ， 微 软 创造 了 一 种 新 的 开发 语言 一 XAML ( 读 作 zaml) 
XAML 的 全 称 是 Extensible Application Markup Language， 即 可 扩展 应 用 
程序 标记 语言 。 它 在 桌面 开发 及 富 媒 体 网 络 程序 的 开发 中 扮演 了 
HTML+CSS+JavaScript 的 角色 、 成 为 设计 师 与 程序 员 之 间 沟 通 的 枢 
纽 。 


现在 ， 设 计 师 和 程序 员 们 一 起 工作 、 共 同 维护 软件 的 版 本 ， 只 是 他 们 
使 用 的 工具 不 同 设计 师 们 使 用 Blend (微软 Expression 设 计 工 具 套 件 
中 的 一 个 ) 来 设计 UI， 程 序 员 则 使 用 Visual Studio 开 发 后 台 逻 辑 代 码 。 
Blend 使 用 起 来 很 像 Photoshop 等 设计 工具 ， 因 此 可 以 最 大 限度 地 发 挥 出 
设计 师 的 特长 。 使 用 它 ， 设 计 师 不 但 可 以 制作 出 绚丽 多 彩 的 静态 UL 
还 可 以 让 UI 包含 动画 一 一 虽然 程序 员 们 也 能 做 出 这 些 东 西 ， 但 从 专业 
性 、 时 间 开 销 以 及 技术 要 求 上 显然 是 划 不 来 的 。 更 重要 的 是 ， 这 些 绚 
丽 的 UI 和 动画 都 会 以 XAML 的 形式 直接 保存 进项 目 ， 无 需 转 化 就 可 以 
直接 编译 ， 节 省 了 大 量 的 时 间 和 成 本 。 


注意 
a 面试 被 问 到 “什么 是 XAML?” 时 ， 你 可 以 回答 : XAML 是 WPF 技 术 中 专门 用 于 设计 
UI 的 语言 。 


1.2 XAML 的 优点 

前 面 一 市 已 经 向 我 们 透露 了 XAML 的 几 个 优点 : 

e XAML 可 以 设计 出 专业 的 UI 和 动画 一 一 好 用 。 

e XAML 不 需要 专业 的 编程 知识 ， 它 简单 易 懂 、 结 构 清晰 一 一 易学 。 
。 XAML 使 设计 师 能 直接 参与 软件 开发 ， 随 时 沟通 、 无 需 二 次 转化 


高 效 。 
然而 ，XAML 这 位 撼 握 君子 的 才华 可 远 不 止 这 些 。 


自从 应 用 程序 从 控制 台 界 面 (Console User Interface, CUI) 升级 为 图 形 

户 界面 (Graphic User Interface, GUI) 后 ， 程 序 员 们 就 一 直 追 求 将 视 
图 (View, 1ESLAEUI) 与 逻辑 代码 的 分 离 。 以 往 的 开发 模式 中 ， 程 序 
员 很 难保 证 用 来 实现 UI 的 代码 完全 不 与 用 来 实现 程序 逻辑 的 代码 纠缠 
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e 无 论 是 软件 的 功能 还 是 UI 设计 有 所 变化 或 者 是 出 了 bug， 痢 将 导致 
大 量 代码 的 修改 。 


e 会 让 逻辑 代码 更 加 难以 理解 
改 之 前 必须 先 读 展 。 


o 重用 逻辑 代码 变 成 了 Mission Impossible ° 


XAML 另 一 个 巨大 的 优点 就 是 : 它 帮助 开发 团队 真正 实现 了 UI 与 逻辑 
的 剥离 。XAML 是 一 种 单纯 的 声明 型 语言 ， 也 就 是 说 ， 它 只 能 用 来 声 
明 一 些 UI 元 素 、 绘 制 UI 和 动画 (在 XAML 里 实现 动画 是 不 需要 编程 
HJ) ， 根 本 无 法 在 其 中 加 入 程序 逻辑 ， 这 就 强制 地 把 逻辑 代码 从 UI 代 
码 中 赶 走 了 。 这 样 ， 与 UI 相 关 的 元 素 统统 集中 在 程序 的 UI 层 、 与 逻辑 
相关 的 代码 统统 集中 在 程序 逻辑 层 ， 形 成 了 一 种 “高 内 聚 一 低 耦 合 ” 的 
结构 。 形 成 这 种 结构 后 ， 无 论 是 对 UI 进 行 较 大 改动 还 是 打算 重用 底层 
逻辑 ， 都 不 会 花费 太 大 力气 。 这 就 好 比 有 一 天 你 给 A 客 户 做 了 一 个 橘 
子 ，A 客 户 很 喜欢 ; A 客 户 把 你 的 产品 介绍 给 了 B 客 户 ，B 客 户 很 喜欢 橘 
子 味道 ， 但 希望 它 看 上 去 像 个 香 芍 一 这 时 候 ， 你 只 需要 把 橘子 皮 撕 
下 来 、 换 一 套 香 获 皮 即 可 。 只 需 很 少 的 成 本 就 可 以 获得 与 先前 一 样 大 
的 收益 〈 对 于 软件 的 “ 换 肤 ”行为 ，WPF 提 供 了 丰富 的 Template 功 能 ， 将 
在 后 面 详 述 ) 。 


修改 往往 比重 写 更 困难 ， 因 为 在 修 


2 
从 零 起 步 认 识 XAML 


尽管 在 命令 行 模式 下 直接 使 用 编译 器 把 XAML 文 件 编译 成 程序 ， 能 够 
让 我 们 更 加 清晰 地 欣赏 XAML 代 码 ， 但 我 一 直 不 认为 那 是 一 种 对 待 初 
学 者 足够 “友好 ”的 方式 。 更 何况 XAML 本 来 就 是 为 了 “可 视 化 ”UI 设计 准 
备 的 ， 我 们 何必 再 “ 蒙 上 眼睛 ”编程 、 自 己 折磨 自己 呢 ? 因 此 ， 还 是 让 
我 们 在 Visual Studio 2008 (简称 VS 2008) 里 开始 XAML 之 旅 吧 ! 


2.1 ”新建 WPF 项 目 


在 新 建 项 目 之 前 ， 先 让 我 们 看 看 什么 是 “项 目 模板 ”。 在 Visual Studio 
2008 中 ， 当 你 使 用 File -New 一 Project 菜 单 命令 时 ， 会 弹出 如 图 2-1 所 示 
的 窗口 。 


Project types: Templates: NET Framework 3.5 


Business Intelligence Projects [ Visual Studio installed. templates 


Visual C$ L. 
Windows E m) (s?) ! E: 


Web Windows Class Library WPF WPF Browser Console 
Smart Device Forms Ap... Application Application Application 


is | EJ E el le?! P 


Reporting Empty Windows WPFCustom WpFUser Windows 
Silverlight Project Service Control Lib.. Control. ^ Forms. 
SSIS ScriptComponent 


SSIS ScriptTask My Templates 


Test p " 
WCF xa 


Workflow Search 
Database Projects Online Te... 


* 


Windows Presentation Foundation client emm (NET Framework 3.5) 


Name: WpfApplicationl 


Location: 


Solution Name: WpfApplicationl 加 Create directory for solution 


图 2-1 ”项目 模板 窗口 


这 个 窗口 就 是 项 目 模板 窗口 (也 有 人 称 之 为 “新 建 项 目 向 导 ” 窗 口 ) e 
模板 (Template) 也 就 是 “模具 ”和 “样板 *”。 项 目 模板 ， 意 思 是 说 你 选择 
使 用 哪个 模板 ， 写 出 来 的 就 是 哪 种 程序 。 为 什么 要 使 用 项 目 模 板 呢 ? 

大 家 知道 ， 为 了 满足 用 户 的 各 种 需求 ， 能 在 Windows 上 运行 的 程序 种 类 
能 达到 数 十 种 之 多 。 想 要 得 到 一 个 程序 ， 首 先 要 由 程序 员 使 用 编程 语 


言 编写 出 源 代 码 ， 然 后 再 使 用 编译 器 将 源 代 码 编译 成 成 品 程序 。 编 译 
器 也 是 一 个 程序 ， 它 的 职责 就 是 把 源 代码 编译 成 目标 程序 。 在 编译 过 
程 中 ， 编 译 器 会 根据 它 获得 的 指令 ， 把 源 代码 编译 成 相应 种 类 的 程 
序 。 就 拿 C# 语 言 的 编译 器 来 说 ， 同 样 一 段 代码 ， 如 果 在 编译 时 使 用 
了 exe 参数 ， 那 么 将 编译 出 一 个 命令 行程 序 (Console Application) ， 
如 果 把 /t:exe 换 成 /t:winexe， 则 编译 结果 是 一 个 图 形 用 户 界 面 程序 (GUI 
Application) ， 如 果 把 /t:winexe 换 成 /t:library ， 则 编译 结果 是 一 个 动态 
链接 库 (Dynamic Link Library DLL) ° 


C# 的 编译 器 有 几 十 个 参数 ， 每 种 应 用 程序 都 有 相应 的 编译 参数 ， 这 还 
不 算 有 些 种 类 的 应 用 程序 需要 在 源 代码 中 进行 相应 的 配置 (如 需要 哪 
些 文件 和 文件 夹 、 代 码 的 基本 格式 是 什么 样 ) 。 如 果 每 次 写 程序 都 让 
程序 员 手 动 配置 这 些 参数 和 初始 设置 ， 那 开销 就 太 大 了 ， 因 此 ，VsS 
2008 准 备 了 对 应 各 种 应 用 程序 的 模板 。 所 以 ， 当 你 选择 了 哪个 模板 ， 
E ME 2008 A SIMEN T RFR AAFEERI T -EER 
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了 解 了 什么 是 项 目 模 板 ， 就 可 以 动手 写 第 一 个 WPF 程 序 了 。 从 项 目 模 
板 里 选择 WPFApplication ， 并 在 窗口 下 部 Name 文 本 框 里 填写 
MyFirstWpfApplication， 然 后 单 击 OK 按 钮 ， 一 个 基本 的 WPF 项 目 就 创 
建 好 了 。 执 行 Debug > Start Debugging 荣 单 命 令 或 者 使 用 工具 栏 上 的 [0 图 
标 ， 就 可 以 编译 这 个 程序 并 在 调试 模式 下 启动 
它 ， 如 图 2-2 所 示 。 


B` Windowl 


图 2-2 ”启动 MyFirstWpfApplication 后 的 运行 结果 
别 看 这 个 程序 非常 简单 ， 可 是 剖析 它 能 为 我 们 春来 很 多 收获 。 


f£ Solution Explorer 窗 口 ( nJ 38 it View — Solution Explorer 荣 单 命 令 显 
示 ) 中 我 们 可 以 看 到 ，VS 2008 的 WPF 项 目 模板 为 我 们 准备 了 一 系列 源 
代码 ， 如 图 2-3 所 示 。 


Solution Explorer - MyFirstWpfApplication 
| à [$]| 


ud S Solution 'MyFirstWpfApplication' (1 project) 


日 1| MyFirstWpfApplication 


H- Ea Properties 
3 La References 
J- [e| Appxaml 
J- e| Windowl.xaml 


图 2-3 VS 2008 的 WPF 项 目 模 板 中 自 带 的 源 代码 文件 夹 


可 以 把 所 有 “+” 都 展开 ， 如 图 2-4 所 示 。 


Solution Explorer - MyFirstWpfApplication 
&a | à [e] | & 


[od Solution 'MyFirstWpfApplication' (1 project) 
Bf. [MyristwpfApplication 
B- ay Properties 
| 08] Assemblylnfo.cs 
B. GA Resources.resx 
| VE Resources. Designer.cs 
B. H) Settings.settings 
| —— Vj Settings.Designer.cs 
ġ- LS References 
.BD PresentationCore 
“加 PresentationFramework 


w m System.Core 

j a «C3 System.Data 

n -本 System.Data.DataSetExtensions 
: «C3 System.Xml 
^ «D System.Xml.Linq 
— «(9 WindowsBase 


B- («| App.xaml 
| V Appxaml.cs 
C pj Windowl xaml 
L.. $) Windowl.xaml.cs 


图 2-4 ” 源 代 码 文 件 夹 中 包含 的 内 容 


下 面 来 介绍 一 下 这 些 分 文 都 是 做 什么 的 : 


e Properties 分 文 : 里 面 的 主要 内 容 是 程序 要 用 到 的 一 些 资源 (如 图 
标 、 图 片 、 静 态 的 字符 串 ) 和 配置 信息 。 


e References] X: 标记 了 当前 这 个 项 目 需 要 引用 哪些 其 他 的 项 目 。 
目前 里 面 列 出 来 的 条 目 都 是 .NET Framework 中 的 类 库 ， 有 时 候 还 要 添 
加 其 他 .NET Framework 类 库 或 其 他 程序 员 编 写 的 项 目 及 类 库 。 


e App.xaml 分 支 : 程序 的 主体 。 大 家 知道 ， 在 Windows 系 统 里 ， 一 个 
程序 就 是 一 个 进程 (Proces) 。Windows 还 规定 ， 一 个 GUI 进程 需要 有 
一 个 窗 体 (Window) 作为 “ 主 窗 体 ”。App.xaml 文 件 的 作用 就 是 声明 了 
程序 的 进程 会 是 谁 ， 同 时 指定 了 程序 的 主 窗 体 是 谁 。 在 这 个 分 支 里 还 
有 一 个 文件 一 一 App.xaml.cs， 它 是 App.xaml 的 后 台 代 码 。 


e Window1.xaml 分 支 : 程序 的 主 窗 体 。 上 面 我 们 看 到 的 图 2-2 所 示 的 
那个 窗口 就 是 由 它 声 明 的 。 它 也 具有 上 有 目 己 的 后 台 代 码 
Window1.xaml.cs。 默 认 地 ，VS 2008 会 为 我 们 打开 以 上 两 个 文件 。 对 于 
XAML 文 件 ，VS 2008 还 具有 “所 见 即 所 得 ”的 可 视 化 编辑 能 力 ， 你 可 以 
在 XAML 代 码 和 预览 视图 之 间 切 换 (切换 标签 在 编辑 器 底部 ) ， 也 可 
以 纵向 或 横向 地 同时 显示 XAML 代 码 和 预览 视图 。 


2.2 ”剖析 最 简单 的 XAML 代 码 


分 析 的 重点 是 Window1.xaml 和 它 的 后 台 代 码 。 在 Window1.xaml 文 件 里 
能 看 到 如 下 代码 : 


«Window x:Class="MyFirstWpfApplication. Window | " 
xmins-"http://schemas.microsof..com/winfx/2006/xaml/presentation" 
xmlns:x-"http;//schemas.microsoft.com/winfx/2006/xaml" 
Title-"Windowl" Height-"300" Width-"300"» 

«Grid» 


«Grid» 


«Window? 


花花 绿绿 一 大 片 、 还 有 两 个 看 着 很 像 主 页 地 址 的 东西 ..…… 它 们 都 是 些 
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XAML 是 一 种 由 XML 派生 而 来 的 语言 ， 所 以 很 多 XML 中 的 概念 在 
XAML 是 通用 的 。 比 如 ， 使 用 标签 声明 一 个 元 素 (每 个 元 素 对 应 内 存 
中 的 一 个 对 象 ) 时 ， 需 要 使 用 起 始 标签 <Tag> 和 终止 标签 </Tag> ， 夹 在 


EE IW SE AA LE ES P JXAML IER AE R 于 这 个 标签 的 内 容 E 
i 则 这 个 标签 称 为 空 标签 ， 可 以 写 
/J «Tag/» ° 


为 了 表示 同类 标签 中 的 某 个 标签 与 众 不 同 ， 可 以 给 它 的 特征 
(Attribute) 赋值 。 为 特征 赋值 的 语法 如 下 : 


e 非 空 标签 : «Tag Attribute1=Valuel Attribute2=Value2>Content</Tag> 


e 空 标签 : «TagAttributel1-Value1 Attribute2-Value2/» 
在 这 里 ， 有 必要 把 Attribute 和 Property 这 两 个 词 仔细 地 辨别 一 下 。 


这 两 个 词 的 混 清 由 来 已 信 。 混 消 的 主要 原因 丈 是 大 多 数 中 文 译 本 里 既 
把 Attribute 译 为 “属性 ”"， 也 把 Property 译 为 “属性 *”。 其 实 ， 这 两 个 词 所 表 
达 的 不 是 一 个 层面 上 的 东西 。 


Property 属 于 面向 对 象 理论 范畴 。 在 使 用 面向 对 象 思想 编程 的 时 候 ， 御 
常 需要 对 客观 事物 进行 抽象 ， 再 把 抽象 出 来 的 结果 封装 成 类 ， 类 中 用 
来 表示 事物 状态 的 成 员 就 是 Property。 比 如 要 写 一 个 模拟 赛车 的 游戏 ， 
那么 必 不 可 少 的 就 是 对 现实 汽车 的 抽象 。 现 实 中 的 汽车 刁 上 会 带 有 很 
多 数据 ， 但 在 游戏 中 可 能 只 关心 它 的 长 度 、 宽 度 、 高 度 、 重 量 、 速 度 
等 有 限 的 儿 个 数据 ， 同 时 ， 还 会 把 汽车 “加 速 ”\“ 减 速 ?等 一 些 行为 也 提 
取出 来 并 用 算法 模拟 ， 这 个 过 程 就 是 抽象 (结果 是 Car 这 个 类 ) 。 显 
然 ，Car.Length、Car.Height、Car.Speed 等 表达 的 是 汽车 当前 处 在 一 个 
什么 状态 ， 而 Car.Accelerate()、Car.Break() 表 达 的 是 汽车 能 做 什么 。 
HE, Car.Length ` Car.Height 、Car.Speed 束 是 Property 的 典型 代表 ,将 
Property 译 为 “属性 ?也 很 贴切 。 总 结 一 句 话 就 是 : Property (ETE) 是 针 
对 对 象 而 言 的 。 


Attribute 则 是 编程 语言 文法 层面 的 东西 。 比 如 有 两 个 同类 的 语法 元 于 A 
和 B， 为 了 表示 A 与 B 不 完全 相同 或 者 A 与 B 在 用 法 上 有 些 区 别 ， 这 时 候 
整 要 针对 A 和 B 加 一 些 Attribute。 也 就 是 说 ，Attribute 只 与 语言 层面 上 的 
东西 相关 ， 与 抽象 出 来 的 对 象 没什么 关系 。 因 为 Attribute 是 为 了 表 
示 “ 区 分 ”的 ， 所 以 把 它 译 为 “特征 ”。C# 中 的 Attribute 束 是 这 种 应 用 的 典 
型 例子 ， 我 们 可 以 为 一 个 类 添加 Attribute， 这 个 类 的 类 成 员 中 有 很 多 
Property。 显 然 Attribute 只 是 用 来 影响 类 在 程序 中 的 用 法 ， 而 Property 则 
对 应 着 抽象 对 象 身 上 的 性 状 ， 它 们 根本 不 是 一 个 层面 上 的 东西 


习惯 上 ， 英 文中 把 标签 式 语言 中 表示 一 个 标签 特征 的 “名 称 一 值 ? 对 称 
作 Attribute。 如 果 恰 好 又 是 用 一 种 标签 语言 在 进行 面向 对 象 编程 ， 这 时 
候 两 个 概念 就 有 可 能 混 清 在 一 起 了 。 实 际 上 ， 使 用 能 够 进行 面向 对 象 
编程 的 标签 式 语言 只 是 把 标签 与 对 象 做 了 一 个 上 映射， 同时 把 标签 的 
Attribute 与 对 象 的 Property 也 做 了 一 个 映射 针对 标签 还 是 叫 
Attribute， 针 对 对 象 还 是 叫 Property， 仍 然 不 是 一 个 层面 上 的 东西 。 而 
E, 标签 的 Attribute 与 对 象 的 Property 也 不 是 完全 映射 的 ， 往 往 是 一 个 
标签 所 具有 的 Attribute 多 于 它 所 代表 的 对 象 的 Property 。 


因为 XAML 是 用 来 在 UI 上 绘制 控件 的 ， 而 控件 本 身 束 是 面向 对 象 抽象 
的 产物 ， 所 以 XAML 标 签 的 Attribute 里 束 有 一 大 部 分 是 与 控件 对 象 的 
Property 互 相对 应 的 。 当 然 ， 这 还 意味 着 XAML 标 签 还 有 一 些 Attribute 
并 不 对 应 控件 对 象 的 Property 。 


明日 了 XAMEL 的 格式 以 及 Attribute 与 Property 的 关系 ， 对 上 面 的 代码 即 
可 一 目 了 然 。 它 的 总 体 结构 是 一 个 <Window> 标 签 内 部 包含 着 一 个 
<Grid> 标 签 (或 者 说 <Grid> 标 签 是 <Window> 标 签 的 内 容 ， 如 下 代码 段 
所 示 ) ， 代 表 的 含义 是 一 个 窗 体 对 象 内 舱 套 着 一 个 Grid 对 象 。 


«Window» 
«Grid» 


</Grid> 
</Window> 


XAML 是 一 种 “声明 ” 式 语 言 ， 当 你 见 到 一 个 标签 ， 束 意味 着 声明 了 一 个 
HL RUBIO `、 要 么 是 包含 ， 全 部 体 现在 标 


下 面 这 些 代 码 惑 都 是 <Window> 标 签 的 Attribute ° 


x:Class-" MyFirst WpfApplication. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title" Window" Height-"300" Width-"300" 


其 中 ，Title、Height 和 Width 一 看 就 知道 是 与 Window 对 象 的 Property 相 对 
应 的 。 中 间 两 行 ( 即 两 个 xmlns) 是 在 声明 名 称 空间 。 最 上 面 一 行 是 在 
使 用 名 为 Class 的 Attribute， 这 个 Attribute 来 自 于 x: 前 缀 所 对 应 的 名 称 空 
间 。 下 面 仔细 解释 。 


前 面 已 经 说 过 ，XAML 语 言 是 从 XML 语言 派生 出 来 的 。XML 语 言 有 一 
个 功能 瓯 是 可 以 在 XML 文档 的 标签 上 使 用 xmlns 特 征 来 定义 名 称 空 间 

(Namespace) ，xmlns 也 就 是 XML-Namespace 的 缩写 了 。 定 义 名 称 空 
间 的 好 处 就 是 ， 当 来 源 不 同 的 类 重 名 时 ， 可 以 使 用 名 称 空间 加 以 区 
分 。xmlns 特 征 的 语法 格式 如 下 : 


xmlns[: 可 选 的 映射 前 绥 ]=" 名 称 空间 " 


xmlns 后 可 以 跟 一 个 可 选 的 映射 前 缀 ， 之 间 用 冒号 分 隔 。 如 傈 没有 写 可 
选 映 射 前 缀 ， 那 丈 意 味 着 所 有 来 目 于 这 个 名 称 空间 的 标签 前 都 不 用 加 
前 级， 这 个 没有 映射 前 缀 的 名 称 空间 称 为 “默认 名 称 空间 ”一 一 默认 名 
称 空间 只 能 有 一 个 ， 而 且 应 该 计 择 其 中 元 素 修 最 频 壹 使 用 的 名 称 空间 
来 充当 默认 名 称 空 间 。 上 面 的 例子 中 ，<Window> 和 <Grid> 都 来 目 由 第 
二 行 声 明 的 默认 名 称 空间 。 而 第 一 行 中 的 Class 特 征 则 来 目 于 第 三 行 中 
Xx: 前 缀 对 应 的 名 称 空间 。 这 里 可 以 做 一 个 有 趣 的 小 实验 ， 如 末 给 第 二 行 
声明 的 名 称 空 间 加 上 一 个 前 级 ， 比 如 hn， 那么 代码 就 必须 改 成 这 样 才能 
编译 通过 : 


<n:Window x:Class="MyFirstWpfApplication. Window1" 
xmins:n="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Window]" Height-"300" Width-"300"» 


<n:Grid> 


«In:Grid» 


«In: Window? 


XAML 中 引用 外 来 程序 集 和 其 中 .NET 名 称 空间 的 语法 与 C# 是 不 一 样 
的 。 在 C# 中 ， 如 果 想 使 用 System.Windows.Controls 名 称 空 间 里 的 Button 
类 ， 需 要 先 把 包含 System.Windows.Controls 名 称 空 间 的 程序 集 


PresentationFramework.dll 通 过 添加 引用 的 方式 引用 到 项 目 中 ， 然 后 再 在 
C# 代 码 的 顶部 写 上 一 句 using System.Windows.Controls;。 在 XAML 中 做 
同样 的 事情 也 需要 先 添加 对 程序 集 的 引用 ， 然 后 再 在 根 元 素 的 起 始 标 
签 中 写 JE = fj : xmlns:c="clr- 
namespace:System.Windows.Controls;assembly-PresentationFramework" ° 
c 是 映射 前 缀 ， 换 成 其 他 的 字符 串 (如 control) 也 可 以 。 因 为 Button 来 
目 前 级 c 对 应 的 名 称 空 间 ， 所 以 在 使 用 Button 的 时 候 就 要 写成 


<C:Button>...</c:Button>。 


xmins:c-"clr- 
namespace:System.Windows.Controls;assembly-PresentationFramework" , 
IAKA- EFKE LADRA nodis, [BANHHEUD, VS 200828 B 
动 提示 功能 的 ， 如 图 2-5 所 示 。 


Windowlxamr Windowl xamkcs| 


1g «Window xClass-"WpfApplication1. Window" 
xmins»"http://schemas.microsoft com/winfx/2006/xaml/presentation" 
xmins.x»"http://schemas.microsoft com/winfx/2006/xaml" 


aP System.Threading in assembly System.Core 

sif System.Timers in assembly System 

af System. Web in assembly System 

aP System, Windows in assembly PresentationCore 

af System. Windows in assembly PresentationFramework 

si System. Windows in assembly WindowsBase 

af System. Windows.Annotations in assembly PresentationFramework 

aP System. Windows.Annotations.Storage in assembly PresentationFramework 
P System. Windows.Automation.Peers in assemb PresentationCore 


" System.Windows.Controls.Primitives in re Pe 
aP System.Windows.Converters in assembly WindowsBase 

aP System. Windows.Data in assembly PresentationFramework 

sf! System. Windows.Documents in assembly PresentationFramework 


图 2-5 vs 2008 的 自动 提示 功能 


在 VS 2008 目 动 提示 的 顶部 ， 你 会 看 到 几 个 看 上 去 像 网 页 地 址 的 名 称 空 

间 ， 如 图 2-6 所 示 ， 其 中 就 包含 例子 代码 中 的 那 两 行 。 为 什么 名 称 空间 
看 上 去 像 是 一 个 主页 地 址 呢 ? 其 实 把 它 copy 到 下 的 地 址 栏 里 莹 试 跳 转 
也 不 会 打开 网 页 。 这 里 只 是 XAML 解 析 器 的 一 个 硬性 编码 (hard- 


coding) ， 只 要 见 到 这 些 固定 的 字符 串 ， 就 会 把 一 系列 必要 的 程序 集 
(Assembly) 和 程序 集中 包含 的 .NET 名 称 空 间 引 用 进来 。 


http://schemas.microsoft.com/winfx/2006/xaml 
http://schemas.microsoft.com/winfx/2006/xaml/composite-font 
http://schemas.microsoft.com/winfx/2006/xaml/presentation 
http://schemas.microsoft,com/xps/2005/06 
s. http://schemas.microsoft.com/xps/2005/06/documentstructure 
aP WpfApplicationl in assembly WpfApplicationl 


sif WpfApplicationl.Properties in assembly WpfApplicationl 
于 Microsoft.CSharp in assembly System 

于 Microsoft.SqlServer.Server in assembly System.Data 

sif Microsoft.VisualBasic in assembly System 

aP Microsoft. Win32 in assembly mscorlib 

于 Microsoft. Win32 in assembly PresentationFramework 

aP Microsoft. Win32 in assembly System 


图 2-6 VS 2008 自 动 提 示 顶 部 的 几 个 名 称 空 间 


默认 引用 进来 的 两 个 名 称 空间 格外 重要 ， 它 们 所 对 应 的 程序 集 和 .NET 
名 称 空间 如 下 : 


http:/schemas.microsoft.com/winfx/2006/xaml/presentation 对 心 : 
e System.Windows 

e System.Windows.Automation 

e System.Windows.Controls 

e System.Windows.Controls.Primitives 

e System.Windows.Data 

e System.Windows.Documents 


e System.Windows.Forms.Integration 


e System.Windows.Ink 

e System.Windows.Input 

e System.Windows.Media 

e System.Windows.Media.Animation 

e System.Windows.Media.Effects 

e System.Windows.Media.Imaging 

e System.Windows.Media.Media3D 

e System.Windows.Media.TextFormatting 
e System.Windows.Navigation 


e System.Windows.Shapes 


也 就 是 说 ， 你 在 XAML 代 码 中 可 以 直接 使 用 这 些 CLR 名 称 空间 中 的 类 
型 《因为 默认 XML 名 称 空间 没有 前 组 ) 。 


http://schemas.microsoft.com/winfx/2006/xaml 则 对 应 一 些 与 XAML 语 法 
和 编译 相关 的 CLR 名 称 空间 。 使 用 这 些 名 称 空间 中 的 类 型 时 需要 加 x 前 
At p US 了 名 为 x 的 XML 名 称 空间 中 〈 后 面 章 节 中 有 详细 
dX) 。 


从 这 两 个 名 称 空间 的 名 字 和 它们 所 对 应 的 .NET 程 序 集 上 ， 我 们 不 难看 
出 ， 第 一 个 名 称 空 间 对 应 的 是 与 绘制 UI 相 关 的 程序 集 ， 是 表示 
(Presentation) 层面 上 的 东西 ; 第 二 个 名 称 空 间 则 对 应 XAML 语言 解 
析 处 理 相关 的 程序 集 ， 是 语言 层面 上 的 东西 。 


还 剩 下 x:Class="MyEirstWpfApplication.Window1" 这 个 Attribute。x: 前 组 
说 明 这 个 Attribute 来 日 于 x 映射 的 名 称 空间 前 面 我 刚刚 分 析 过 ， 这 
个 名 称 空间 是 对 应 XAML 人 解析 功能 的 。x:Class， 顾 名 思 义 它 与 类 有 些 
关系 ， 是 何 种 关系 呢 ? 让 我 们 做 个 有 趣 的 实验 ; 


#3, füx:Class-"MyFirstWpfApplication.Window1" 3X T Attribute}! f= , 
再 到 Window1.xaml.cs 文 件 里 ， 把 构造 器 中 对 InitializeComponent 方 法 的 
调用 也 删 掉 。 编 译 程 序 ， 你 会 发 现 程序 仍然 可 以 运行 。 为 什么 呢 ? FT 
JF App.xaml 这 个 文件 ， 你 能 发 现 这 样 一 个 Attribute 
StartupUri="Window1.xaml"， 它 是 在 告诉 编译 圳 把 由 Window1.xaml 解 
析 后 生成 的 窗 体 作 为 程序 启动 时 的 主 窗 体 。 也 就 是 说 ， 只 要 
Window1.xaml 文 件 能 够 被 正确 解析 成 一 个 窗 体 ， 程 序 就 可 以 正常 运 
人 


然后 ， 只 恢复 x:Class 这 个 Attribute (不 恢复 对 InitializeComponent 方 法 的 
调 用 ) : 并 更 nm EÉ 的 E 为 
x:Class="MyFirstWpfApplication.WindowABC"。 编 译 之 后 ， 仍 然 可 以 正 
确 运 行 。 这 时 ， 使 用 IL Disassembler (中 间 语 言 反 编译 器 ， 如 图 2-7 所 
c) 打开 项 目的 编译 结果 ， 你 会 发 现在 由 项 目 编译 生成 的 程序 集 里 包 
含 一 个 名 为 WindowABC 的 类 ， 如 图 2-8 所 示 。 


J Microsoft Windows SDK v6.0A 
di Tools 
四 Fusion Log Viewer 
23 GUID Ge 


—-— 


nera 
f IL Disassembler 


j9 Install Microsoft FXCop 
[sd Manifest Generation and Editing 


图 2-7 中间 语 言 反 编译 器 的 位 置 


pum 
J CAUsersAdministratoriDocuments... EI 


File View Help 
B-Q Ciusers|AdministratorlDocumentslVisual Studio 2008lP 
-P MANIFEST 
WpfApplication1 
B- M) wprapplicationt .Properties 


由 E: WpfApplication1 .App 
icationt Wind 


H- WhpfAppli Wi 
&- B wpfApplicationt ,WindowABC 


owi 


assembly WpfApplicationt 
1 : 


图 2-8 项目 编译 后 生成 的 WindowABC 类 


这 说 明 ，x:Class 这 个 Attribute 的 作用 是 当 XAML 人 解析 器 将 包含 它 的 标签 
解析 成 C# 类 后 ， 这 个 类 的 类 名 是 什么 。 这 里 ,已 经 触及 到 的 XAML 的 
本 质 。 前 面 我 们 已 经 看 到 ， 示 例 代 码 的 结构 就 是 使 用 XAML 语 言 直观 
地 告诉 我 们 ， 当 前 被 设计 的 窗 体 是 在 一 个 <Window> 里 蔷 套 一 个 
<Grid>。 如 果 是 使 用 C# 来 完成 同样 的 设计 呢 ? 显然 ， 我 们 不 可 能 去 更 
改 Window 这 个 类 ， 我 们 能 做 的 是 从 Window 类 派生 出 一 个 类 (Ee anm] 
WindowABC) ， 再 为 这 个 类 添加 一 个 Grid 类 型 的 字段 ， 然 后 把 这 个 字 
E UU UIN 。 代码 看 起 来 大 概 是 这 


using System. Windows; 


using System. Windows.Controls; 


class WindowABC : Window 
[ 
1 


private Grid grid; 


public WindowABC() 


| 
t 


grid = new Grid(); 
this.Content = grid; 
l 
j 


1 
j 


最 后 ， 让 我 们 回 到 最 初 的 代码 。 你 可 能 会 问 : TEXAML 里 有 
x:Class-"MyFirstWpfApplication. Window1"， 在 Window1.xaml.cs 里 也 声 
HH f Windowi X CTX, WEET PRE? 仔细 看 看 
Window1.xaml.cs 中 Window1 类 的 声明 焉 知道 了 一 一 在 声明 时 使 用 了 
partia 这 个 关键 字 。 使 用 partial 关 键 字 ， 可 以 把 一 个 类 分 拆 在 多 处 定 
义 ， 只 要 各 部 分 代码 不 神 突 即 可 。 显 然 ， 由 XAML 解 析 器 生成 的 
Window1 类 在 声明 时 也 使 用 了 partial 关 键 字 ， 这 样 ， 由 XAML 解析 成 的 
类 和 C# 文 件 里 定义 的 部 分 就 合 二 为 一 。 正 是 由 于 这 种 partial 机 制 ， 我 们 
可 以 把 类 的 逻辑 代码 留 在 .cs 文件 里 ， 用 C# 语 言 来 实现 ， 而 把 那些 与 声 
明 及 布局 UI 元 素 相 天 的 代码 分 离 出 去 ， 实 现 UI 与 逻辑 分 离 。 并 有 日， 用 
于 绘制 UI 的 代码 (如 声明 控件 类 型 的 字段 、 设 置 它们 的 外 观 和 布局 
等 ) 也 不 必 再 使 用 C# 语 言 ， 使 用 XAML 和 XAML 编 辑 工 具 就 能 轻松 搞 
Æ! 


至 此 ， 你 应 该 对 这 个 最 简单 的 XAML 程 序 了 然 于 胸 了 。 
3 


系统 学 习 XAML 语 法 


有 了 前 面 那 个 例子 开导 破土， 我 们 对 XAML 已 经 不 再 卫生 。 下 面 ， 我 

们 将 系统 地 学 习 XAML 的 语法 和 编程 知识 。 为 了 让 大 家 更 透彻 地 理解 

、 我 尽 可 能 地 在 每 个 XAML 实 例 后 跟 上 一 个 用 C# 实 现 同样 功能 
实例 。 


回顾 前 面 的 例子 ， 我 们 已 经 知道 XAML 是 一 种 专门 用 于 绘制 UI 的 语 
言 ， 借 助 它 可 以 把 UI 定义 与 运行 逻辑 分 离开 来 。XAML 使 用 标签 来 定 
义 UI 元 素 (UI Element) ， 每 个 标签 对 应 .NET Framework 类 库 中 的 一 个 
控件 类 。 通 过 设置 标签 有 的 Attribute， 不 但 可 以 对 标签 所 对 应 控件 对 象 的 
Property 进 行 赋值 ， 还 可 以 做 一 些 额外 的 事件 (如 声明 名 称 空 间 、 指 定 
类 名 等 ) 。 在 这 个 大 框架 下 ， 我 们 来 详细 地 了 解 XAML 的 一 些 细 广 。 


3.1 XAML 文 档 的 树 形 结构 


UI 在 用 户 眼 里 是 个 平面 结构 。 以 如 图 3-1 所 示 图 为 例 ， 在 用 户 看 来 ， 这 
个 界面 就 是 一 个 窗 体 上 平 铺 着 四 个 文本 框 和 一 个 按钮 的 界面 。 


E Window 


| Id | 


图 3-1 ”用户 眼 里 的 UI 布局 


在 传统 的 Visual C++ ` Delphi ` Visual Basic 6 和 Windows Form 程 序 员 的 
思维 里 ，UI 也 是 一 个 平面 的 结构 。 因 此 ， 程 序 员 要 做 的 事情 就 是 按照 
设计 师 给 定 的 UI 布局 把 控件 安置 在 窗 体 表面 ， 并 用 使 用 长 度 、 宽 度 和 
间距 把 控件 对 齐 。 


与 传统 设计 思维 不 同 ，XAML 使 用 树 形 逻辑 结构 来 描述 UI。 下 面 是 用 
来 描述 上 图 UI 布局 的 XAML 代 码 。 


«Window x:Class-" WpfApplication |. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Window" Height-"173" Width-"296"» 

«StackPanel Background" Light Blue"? 
«TextBox x:Name-"textBox1" Margin-"5"/» 
«TextBox x:Name-"textBox2" Margin-"5"/» 
«StackPanel Orientation" Horizontal" 
«TextBox x:Name-"textBox3" Width" 140" Margin-"5"/» 
«TextBox x:Name-"textBox4" Width-"120" Margin-"5"/» 
</StackPanel> 
«Button x:Name="button]1" Margin="$"> 
«|mage Source-"p0009.png" Width="23" Height="23"/> 
</Button> 
</StackPanel> 
</Window> 


因为 代码 中 这 有 很 多 对 Attribute 的 赋值 ， 所 以 结构 看 起 来 并 不 是 那么 清 
晰 。 如 果 我 们 把 对 Attribute 的 赋值 都 去 掉 ， 那 么 上 面 这 段 代 码 就 显露 出 
了 它 的 树 形 框架 结构 。 


«Window» 

«StackPanel^ 
«TextBox /> 
«TextBox /> 
«StackPanel^ 

«TextBox /> 
«TextBox > 
«/StackPanel^ 
«Button? 
«]mage/^ 
</Button> 
</StackPanel> 
</Window> 


如 果 用 一 张 图 表示 上 面 的 树 形 结构 ， 它 会 是 如 图 3-2 所 示 的 样子 。 


Window 


StackPanel 


图 3-2 XAML 使 用 树 形 逻 辑 结 构 描 述 UI 
有 意思 的 是 ， 针 对 同一 个 “看 上 去 一 样 * 的 UI 布局 ，XAML 代 码 不 一 定 
是 唯一 的 。 拿 上 面 的 UI 布局 来 说 ， 我 们 还 可 以 使 用 不 同 的 XAML 代 码 


ARTE, ° 


«Window x:Class-"WpfApplicationTree. Window | " 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" Window" Height-"175" Width-"300"» 
«Grid Background-"LightSlateGray"» 
«Grid.ColumnDefinitions? 
«ColumnDefinition Width-"7*"/» 
«ColumnDefinition Width-"3*"/» 
«/Grid.ColumnDefinitions» 
«Grid. RowDefinitions» 
<RowDefinition Height-"33"/» 
<RowDefinition Height-"33"/» 
<RowDefinition Height-"33"/» 
<RowDefinition Height-"40"/» 
«/Grid.RowDefinitions» 
«TextBox x:Name-"textBox1" Grid.Column-"0" Grid. Row-"0" Grid.ColumnSpan-"2" Margin-"5"/» 
«TextBox x: Name-"textBox2" Grid.Column-"0" Grid.Row-"|" Grid.ColumnSpan-"2" Margin-"5"/» 
«TextBox x:Name-"textBox3" Grid.Column-"0" Grid.Row-"2" Grid.ColumnSpan-"]" Margin-"5"/» 
«TextBox x:Name-"textBox4" Grid.Column-"1" Grid.Row-"2" Grid.ColumnSpan-"" Margin-"5"/» 
«Button x:Name-"button]" Grid.Column-"0" Grid.Row-"3" Grid.ColumnSpan-"2" Margin-"5"» 
«mage Source-"p0009.png" Width-"23" Height-"23"/» 
«[Button» 
«IGrid» 
«/Nindow» 


精诚 后 的 代码 是 : 


«Window» 

«Grid» 
«TextBox > 
«TextBox /> 
«TextBox /> 
«TextBox /> 
«Button» 

«mage /> 

SButton> 

</Grid> 


«Window» 


框架 则 变 成 了 如 图 3-3 所 示 的 样子 。 


Window 


Button 


图 3-3 ”同样 的 UI 可 能 对 应 不 同 的 XAML 实 现 


尽管 两 段 代 码 对 UI 的 实现 方法 不 同 (实际 上 还 有 很 多 方法 ) ， 但 框架 
都 是 树 状 的 ， 以 <Window> 对 象 为 根 结 点 ， 一 层 一 层 向 下 包含 。 这 种 树 
形 结 构 对 于 WPF 整 个 体系 都 具有 非常 重要 的 意义 ， 它 不 但 影响 着 UI 的 
布局 设计 ， 还 深刻 地 影响 着 WPF 的 属性 (Property) 子 系统 和 事件 

(Event) 子 系 统 等 方方面面 。 在 实践 编程 中 ， 我 们 经 常 要 在 这 棵 树 上 
进行 按 名 称 查 找 元 素 、 获 取 父 信子 结 点 等 操作 ， 为 了 方便 操作 这 棵 
树 ，WPF 基 本 类 库 里 为 程序 员 准 备 了 VisualTreeHelper 和 
LogicalTreeHelper 两 个 助手 类 (Helper Class) ， 同 时 还 在 一 些 重要 的 基 
类 里 封闭 了 一 些 专门 用 于 操作 这 标 树 的 方法 。 


你 可 能 会 器 :既然 有 这 么 多 种 方法 来 实现 同一 个 UI， 那 到 压 应 该 选择 
哪 种 方法 来 实现 UI 呢 ? 实际 上 ， 设 计 师 给 出 的 UI 布 局 是 软件 的 一 个 静 
态 快照 (Static Snap) ， 这 个 静态 快照 加 上 用 户 有 可 能 的 动态 操作 才能 
构成 选择 布局 实现 方式 的 完整 依据 。 全 上面 两 段 代 码 举 例 ， 如 有 果 你 期 
望 用 户 在 改变 窗 体 尺 寸 后 控件 能 够 成 比例 缩放 目 己 的 尺寸 ， 那 么 应 该 
选用 第 二 段 代码 ， 如 来 只 期 望 控 件 在 纵 同 上 做 一 个 简单 排列 ， 第 一 段 
代码 就 已 足够 。 


3.2 XAML 中 为 对 象 属性 赋值 的 语法 


XAML 是 一 种 声明 性 语言 ，XAML 编 译 器 会 为 每 个 标签 创建 一 个 与 之 
对 应 的 对 象 。 对 象 创建 出 来 之 后 要 对 它 的 属性 进行 必要 的 初始 化 之 后 
才 有 使 用 意义 。 因 为 XAML 语 言 不 能 编写 程序 的 运行 逻辑 ， 所 以 一 份 
XAML 文 档 中 除了 使 用 标签 声明 对 象 就 是 初始 化 对 象 的 属性 了 。 

注意 

XAML 中 为 对 象 属性 赋值 共有 两 种 语法 : 


o 使 用 字符 串 进行 简单 赋值 


e 使 用 属性 元 素 (Property Element) 进行 复杂 赋值 。 


我 们 以 一 个 <Rectangle> 标 签 的 F 记 为 例 来 介绍 这 两 种 方法 。 
3.2.1 使 用 标签 的 Attribute 为 对 象 属性 赋值 


前 面 我 们 已 经 知道 ， 一 个 标签 的 Attribute 里 有 一 部 分 与 对 象 的 Property 
互相 对 应 ，<Rectangle> 标 签 的 Fi 这 个 Attribute Wi z 3X TE ES 
Rectangle X% Xf Z& B5 Fill J& 1E XT V. » YE MSDN X 3 E E nf DJ $5 $1 , 
Rectangle.Fill 的 类 型 是 Brush。Brush 是 一 个 抽象 类 ， 几 是 以 Brmush 为 基 类 
的 类 都 可 作为 Fill 属 性 的 值 。Brush 的 派生 类 有 很 多 : 


e SolidColorBrush: 单 色 画 刷 。 


e LinearGradientBrush: 线性 渐变 画 刷 。 


e RadialGradientBrush: 1% [n]i9r igi fl] ° 

e ImageBrush: 位 图 画 刷 。 

e DrawingBrush: RÆ KE] ° 

e VisualBrush: 可 视 元 素 画 刷 。 

下 面 这 个 例子 中 只 使 用 SolidColorBrush 和 LinearGradientBrush 两 种 。 


我 们 先 学 习 使 用 字符 串 对 Attribute 进 行 简 单 赋值 。 假 设 我 们 的 Rectangle 
只 需要 填充 成 单一 的 监 色 ， 那 么 只 需要 简单 地 写成 : 


«Window x:Class="WpfApplicationTree. Window 1" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title" Window" Height-" 188" Width-"300"» 

«Grid VerticalAlignment-"Center" HorizontalAlignment-"Center" 
«Rectangle x:Name-"rectangle" Width-"200" Height-" 120" Fill-"Blue"/» 

</Grid> 

</Window> 


运行 的 效 琳 如 图 3-4 所 示 。 


E Window 


图 3-4 ”用 字符 串 对 Attribute 简 单 赋值 的 效果 图 


我 们 看 到 ，Blue 这 个 字符 串 最 终 被 翻译 成 了 一 个 SolidColorBrush 对 象 并 
赋值 给 了 rectangle 对 象 。 换 成 C# 代 码 是 这 样 : 


SolidColorBrush sBrush =new SolidColorBrush(); 
sBrush.Color = Colors.Blue; 


this.rectangle.Fill = sBrush; 


需要 注意 的 是 ， 通过 这 种 Attribute=Value 语 法 赋值 时 ， HT XAML 的 语 
法 限制 ，Value 只 可 能 是 一 个 字符 串 值 。 这 天 引出 了 两 个 问题 ; 


e 如果 一 个 类 能 使 用 XAML 语 言 进 行 声 明 ， 并 允许 它 的 Property 与 
XAML 标 签 的 Attribute 互 相映 射 ， 那 束 需 要 为 这 些 Property 准 备 适 当 的 
转换 机 制 。 


e 由 于 Value 是 个 字符 串 ， 所 以 其 格式 复杂 程度 有 限 ， 尽 管 可 以 在 转换 
机 制 里 包含 一 定 的 按 格式 解析 字符 串 的 功能 以 便 转 换 成 较 复 杂 的 目标 
对 象 ， 但 这 会 让 最 终 的 XAML 使 用 者 头疼 不 已 。 因 为 他 们 不 得 不 在 没 
有 编码 辅助 的 情况 下 手写 一 个 格式 复杂 的 字符 串 以 满足 赋值 要 求 。 


第 一 个 问题 的 解决 方案 是 使 用 TypeConverter 类 的 派生 类 ， 在 派生 类 里 
重 写 TypeConverter 的 一 些 方法 ， 第 二 个 问题 的 解决 办 法 就 是 使 用 属性 
元 素 (Property Element) 。 


3.2.2 $E H TypeConverter X XAML 标签 的 Attribute 与 对 象 
的 Property 进 行 映射 


注意 


本 小 和 的 例子 对 于 初学 者 来 说 理解 起 来 比较 困难 而 且 实 用 性 不 大 ， 主 要 是 为 喜欢 刨 根 问 确 的 
WPF 程 序 员 准备 的 ， 初 学 者 可 以 跳 过 这 一 人 小节。 


首先 ， 我 们 准备 了 一 个 类 : 


public class Human 

| 
public string Name | get; set; } 
public Human Child | get; set; } 


l 
| 


这 个 类 具有 两 个 属性 : 
e string 类 型 的 Name ° 
e Human 类 型 的 Child。 


现在 我 的 期 前 是 ， 如 果 在 XAML 里 这 样 写 : 


«Window.Resources? 
«]ocal:Human x:Key-"human" Child-" ABC"/» 
«/N'indow.Resources? 


Wi] BE 87 74 Human SE ffi P] Child JE T: WA — ^ Human 2$ 72H pE, FE 
Child.Name 束 是 这 个 字符 串 的 值 。 


我 们 先 看 看 直接 写 行 不 行 。 在 UI 上 添 加 一 个 按钮 button1， 并 在 它 的 
Click 事 件 处 理 器 里 写 上 : 


private void button]. Click(object sender, RoutedEventArgs e) 


Human h (Human )this.FindResource("human"); 
MessageBox.Show(h.Child.Name); 


编译 没有 问题 ， 但 在 单 击 按钮 之 后 程序 抛 出 异常 ， 告 诉 Child 不 存在 ， 
为 什么 Child 不 存在 呢 ? 原因 很 简单 ，Human 的 Child 属 性 是 Human 类 
型 ， 而 XAML 代 码 中 的 ABC 十 个 字符 串 ， 编 诺 右 不 知道 如 何 把 一 个 字 
符 串 实例 转换 成 一 个 Human 实 例 。 那 我 们 应 该 怎么 做 呢 ? 办 法 是 使 用 
TypeConverter 和 TypeConverterAttribute 这 两 个 类 。 


首先 ， 我 们 要 从 TypeConverter 类 派生 出 自己 的 类 ， 并 重 写 它 的 一 个 
ConvertFrom 方 法 。 这 个 方法 有 一 个 参数 名 为 value ， 这 个 值 就 是 在 
XAML 文 档 里 为 它 设 置 的 值 我 们 要 做 的 就 是 把 这 个 值 “翻译 ”成 合适 类 型 
的 值 赋 给 对 象 的 属性 : 


public class StringToHumanTypeConverter : TypeConverter 


! 
l 


public override object ConvertFrom(ITypeDescriptorContext context, System.Globalization.CultureInfo culture, object value) 


| 
if (value is string) 
i 
Human h = new Human(); 
h.Name = value as string; 
return h; 
\ 


return base.ConvertFrom(context, culture, value); 


有 了 这 个 类 还 不 够 ， 还 要 使 用 TypeConverterAttribute 这 个 特征 类 把 
StringToHumanTypeConverter 这 个 类 “粘贴 ?到 作为 目标 的 Human 类 上 。 


[TypeConverterAttribute(typeof(StringToHumanTypeConverter))) 
public class Human 


f 
1 


public string Name | get; set; } 
public Human Child { get; set; } 


为 特征 类 在 使 用 的 时 候 可 以 省 略 Attribute 这 个 词 ， 所 以 也 可 以 写成 : 


[TypeConverter(typeof( String ToHumanTypeConverter))] 


public class Human 


i 
public string Name { get; set; } 
public Human Child { get; set; } 
| 


但 这 样 写 ， 我 们 需要 认 清 写 在 方 括号 里 的 是 TypeConverterAttribute 而 不 


是 TypeConverter ° 


完成 之 后 ， 再 次 单 击 按钮 ， 我 们 想 要 的 结果 束 出 来 了 ! 如 图 3-5 所 示 。 


图 3-5 ”运行 结 


注意 


需要 注意 的 是 ，TypeConverter 类 的 使 用 远 远 不 是 只 重 载 一 个 ConvertFrom 方 法 那么 简单 。 为 了 
in UE 还 需要 重 载 其 他 几 个 方法 。 详 细 的 使 用 方法 请 参阅 TypeConverter 的 类 库 


3.2.3 ”属性 元 素 


在 XAML 中 ， 非 空 标签 均 具 有 自己 的 内 容 (Content) 。 标 签 的 内 容 指 
的 就 是 夹 在 起 始 标 签 和 结束 标签 之 间 的 一 些 子 级 标签 ， 每 个 子 级 标签 
都 是 父 级 标签 内 容 的 一 个 元 素 (Element) ， 人 简称 为 父 级 标签 的 一 个 元 
素 。 有 顾名思义 ， 属 性 元 素 指 的 是 某 个 标签 的 一 个 元 素 对 应 这 个 标签 的 
一 个 属性 ， 即 以 元 素 的 形式 来 表达 一 个 实例 的 属性 。 代 但 描述 为 : 


«ClassName? 
«ClassName.PropertyName» 
<-- 以 对 象形 式 为 属性 赋值 --> 
</ClassName,PropertyName> 


</ClassName> 


这 样 ， 在 这 个 标签 的 内 部 就 可 以 使 用 对 和 象 (而 不 再 局 限于 简单 的 字符 
R) 进行 赋值 了 。 


人 XAML 代 码 将 是 这 


«Grid VerticalAlignment-"Center" HorizontalAlignment="Center"> 
«Rectangle x: Name-"rectangle" Width-"200" Height-"120"» 
«Rectangle.Fill 
«SolidColorBrush Color-"Blue"/» 
«/Rectangle.Fill» 
«/Rectangle» 
</Grid> 


效果 与 先前 代码 别 无 二 致 。 所 以 ， 对 于 简单 赋值 而 言 属性 元 素 语法 并 
没有 什么 优势 ， 反 而 让 代码 看 起 来 有 点 见长 。 但 过 到 属性 是 复杂 对 象 
时 这 种 语法 的 优 努 吏 体 现 出 来 了 ， 如 使 用 线性 渐变 画 刷 来 可 充 这 个 扼 


o 


«Grid VerticalAlignment-"Center" HorizontalAlignment-" Center"? 
«Rectangle x:Name-"rectangle" Width-"200" Height-"120"» 
«Rectangle.Fill» 
«LinearGradientBrush» 
« LinearGradientBrush.StartPoint? 

«Point X-"0" Y="0"/> 
«/LinearGradientBrush.StartPoint? 
«LinearGradientBrush.EndPoint» 

«Point X="1" Y2"]"/» 
«JLinearGradientBrush.EndPoint^ 
«LinearGradientBrush.GradientStops? 

«GradientStopCollection» 

«GradientStop Offset-"0.2" Color-"LightBlue"/» 
«GradientStop Offset-"0.7" Color-"Blue"/» 
«GradientStop Offset-" 1.0" Color-"DarkBlue"/» 
«/GradientStopCollection 
«/LinearGradientBrush.GradientStops 
«/LinearGradientBrush» 
«/Rectangle.Fill» 
«[Rectangle» 
«/Grid» 


效果 如 图 3-6 所 示 。 


8' Window 


图 3-6 ”用 线性 渐变 画 刷 填 充 矩 形 


LinearGradientBrush 的 GradientStops 属 性 是 一 个 GradientStop 对 象 的 集合 

(GradientStopCollection) ， 即 一 系列 的 矢量 渐变 填充 点 。 在 这 些 填充 
点 之 间 ， 系 统 会 自动 进行 插值 运算 、 计 算出 过 渡 色 彩 。 填 充 矢量 的 方 
向 是 StartPoint 和 EndPoint 两 个 属性 (类 型 为 Point) WERDE, Æ 
左上 角 为 0,0、 右 下 角 为 1,1°。 这 上段 代码 中 ， 针 对 这 三 个 属性 都 使 用 了 属 
性 标签 式 赋 值 方法 。 


古语 道 : “过 犹 不 及 ”。 上 面 的 代码 为 了 突出 属性 元 系 语 法 我 将 所 有 属 
性 都 展开 成 属性 元 素 ， 结 采 是 代码 的 可 读 性 一 落 千丈 。 经 过 优化 ， 代 
码 变 成 这 样 〈 少 了 三 分 之 一 ) : 


«Grid VerticalAlignment-"Center" HorizontalAlignment-"Center"» 
«Rectangle x:Name-"rectangle" Width-"200" Height-"120"» 
«Rectangle.Fill» 
«LinearGradientBrush? 
«LinearGradientBrush.GradientStops? 
«GradientStop Offset-"0.2" Color-"LightBlue"/» 
«GradientStop Offset-"0,7" Color-"Blue"/» 
«GradientStop Offset-" 1.0" Color-"DarkBlue"/» 
«/LinearGradientBrush.GradientStops? 
«/LinearGradientBrush 
«/Rectangle.Fill» 
</Rectangle> 


</Grid> 
注意 
这 里 有 几 个 简化 XAML 的 技巧 ; 


e 能 使 用 Attribute=Value 形 式 赋值 的 就 不 使 用 属性 元 素 。 


e 充分 利用 默认 值 ， 去 除 见 余 : StartPoint="0,0" EndPoint="1,1" 是 默认 值 ， 可 以 省 略 。 


充分 利用 XAML 的 简写 方式 XAML 的 简写 方式 有 很 多 ， 需 要 在 实际 工作 中 慢 慢 积累 。 
书 也 会 在 用 到 的 地 方 逐 一 人 比 如 本 例 ， LinearGradientBrush.GradientStopsf 的 数据 类 下 
GradientStopCollection ， 如 果 严 格 按照 语法 来 写 ， 这 个 属性 元 素 的 内 容 应 该 是 一 
<GradientStopCollection> 标 签 , nb. XAML 人 允许 你 4 ed EX VATRA NEE. 接 写 在 
性 元 素 的 内 容 里 。 控 件 的 “内 容 属性 * 也 有 类 似 简写 。 


Jan 


最 后 ， 用 一 个 小 例子 【稍微 动用 一 点 我 们 的 美学 知识 ) 来 结束 这 一 
W: 


«Grid VerticalAlignment-"Center" HorizontalAlignment-" Center" 
«Ellipse Width-" 120" Height-"120"» 
«Ellipse.Fill» 
«RadialGradientBrush GradientOrigin-"0.25,0.25" RadiusX-"0.75" RadiusY-"0.75"» 
«RadialGradientBrush.GradientStops? 
«GradientStop Color-" White" Offset-"0"/» 
«GradientStop Color-" Black" Offset-"0.65"/» 
«GradientStop Color-"Gray" Offset-"0.8"/» 
«[RadialGradientBrush.GradientStops 
«fRadialGradientBrush 
«JEllipse.Fill» 
«JEllipse» 
«/Grid» 


这 是 一 个 径 向 渐变 画 刷 的 例子 ， 效 采 如 图 3-6 所 示 。 


8 ' Window 


图 3-6 ” 径 向 渐变 画 刷 效果 图 


于 万 不 要 以 为 我 是 在 VS 2008 里 一 行 一 行 写 出 的 XAMI 一 一 这 段 代码 的 
大 部 分 内 容 是 我 使 用 Blend 通 过 绘图 的 形式 目 动 生成 的 。 由 Blend 生 成 的 
代码 里 会 包含 一 些 宛 余 的 细节 。 常 见 的 元 余 细 节 包 括 : 


e 值 过 于 精确 : 比如 0.7910310830 这 样 的 值 ， 一 般 可 以 简化 成 0.8 以 提 
高 可 读 性 。 


e 默认 值 被 显 式 地 写 出 : 比如 为 StackPanel 显 式 地 写 出 
Orientation= "Vertical". 一 般 删 掉 即 可 。 


e 专门 用 于 Blend 绘 图 的 标记 : 比如 用 于 锁定 图 形 的 标记 ， 建 议程 序 
员 与 设计 师 协 商 保留 还 是 删除 。 


一 般 情 况 下 ， 对 于 复杂 的 绘图 和 动画 创作 ， 应 该 先 在 Blend 里 进行 操 
作 ， 然 后 回 到 VS 2008 里 进行 精确 的 微调 ， 在 保证 不 影响 效果 的 情况 下 
尽 可 能 地 提高 代码 的 可 读 性 和 可 维护 性 。 


3.2.4 ”标记 扩展 (Markup Extensions) 


仔细 观察 XAML 中 为 对 象 属性 赋值 的 语法 ， 你 会 发 现 大 多 数 赋值 都 是 
为 属性 生成 一 个 新 对 象 。 但 有 时 候 需 要 把 同一 个 对 象 赋值 给 两 个 对 象 
的 属性 ， 还 有 的 时 候 需 要 给 对 象 的 属性 赋 一 个 null 值 ，WPF 甚 至 允许 将 
一 个 对 象 的 属性 值 依赖 在 其 他 对 象 的 某 个 属性 上 。 当 需要 为 对 象 的 属 
性 进行 这 些 特殊 类 型 赋值 时 就 需要 使 用 标记 扩展 了 。 


注意 


所 谓 标记 扩展 ， 实 际 上 是 一 种 特殊 的 Attribute=Value 语 法 ， 其 特殊 的 地 方 在 于 Value 字符 串 是 
人 组 成 ，XAML 编 译 器 会 对 这 样 的 内 容 做 出 解析 、 华 成 相应 的 对 


因为 本 章 内 容重 在 讲述 XAML 的 语法 ， 所 以 不 必 过 分 追究 下 面 这 段 代 
码 的 编程 细节 ， 只 需要 关注 标记 扩展 的 语法 即 可 。 在 下 面 的 代码 中 ， 
将 使 用 Binding 类 的 实例 将 TextBox 的 Text 属 性 依赖 在 Slider 的 Value 上 ， 
这 样 ， 当 Slider 的 滑 块 滑动 时 TextBox 就 会 显示 Slider 当 前 的 值 。 


«Window x:Class-"WpfApplication] Window | " 
xmlns-"http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xam]" 

Title-" Window" Height-" 110" Width-"240"» 

<StackPanel Background-"LightSlateGray"» 
«TextBox Text-" [Binding ElementName-sliderl, Path- Value, Mode-OneWay|" Margin-"5"/» 
«Slider x: Name-"slider]" Margin-"5"/» 

«/StackPanel» 


«Window» 


其 中 , Text-"(Binding ^ ElementName-sliderl, ^ Path-Value, 
Mode=OneWay}" 这 人 句 就 是 标记 扩展 了 。 我 们 分 析 一 下 这 人 句 代码 : 


: 当 编 译 器 看 到 这 人 句 代码 时 就 会 把 花 括 号 里 的 内 容 解析 成 相应 的 对 


e 对 象 的 数据 类 型 名 是 紧邻 左 伦 括号 的 字符 串 。 
e 对 和 象 的 属性 由 一 串 以 逗号 连接 的 子 字 符 串 负责 初 始 化 (注意 ， 属 性 
值 不 再 加 引号 ) 。 


初学 者 常 认为 这 个 语法 比较 难 记 ， 其 实 这 个 语法 与 C# 3.0 中 的 对 象 初始 
化 语法 非常 相近 。 如 果 使 用 C# 3.0 的 语法 来 创建 一 个 Binding 类 的 实 
例 ， 最 佳 的 语法 应 该 是 : 


Binding binding = new Binding() | Source = sliderl, Mode = BindingMode.OneWay }; 


CH 3.0 中 对 象 初始 化 器 也 是 这 样 ， 使 用 一 对 人 花 括 号 包围 一 组 由 逗号 分 陋 
的 子 字 符 串 ， 这 些 子 字符 串 用 来 初始 化 对 象 的 属性 。 只 是 XAML 的 标 
签 扩展 把 对 象 的 数据 类 型 也 搬 到 括号 里 面 来 了 。 


标记 扩展 亦 生 对 属性 的 赋值 ， 所 以 完全 可 以 使 用 属性 标签 的 形式 来 蔡 
换 标记 扩展 ， 只 是 人 简 涪 性 使 然 没 人 那么 做 罢了 。 下 面 是 使 用 属性 标签 
玲 换 标记 扩展 后 的 代码 : 


«Window x:Class-"WpfApplication] Window] " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsofl.com/winfx/2006/xaml" 

Title-" Window" Height-" 110" Width-"240"» 
«StackPanel Background-"LightSlateGray"» 
«TextBox Margin-"5"» 
«TextBox.Text? 
«Binding ElementName-"sliderl" Path" Value" Mode-" One Way"/^ 
«/TextBox. Text? 
«/TextBox^ 
«Slider x:Name-"slider" Margin-"5"/» 
«/StackPanel^ 
</Window> 


JUEE 53 B Bim ae P [CES SCR o 阅读 不 便 ， 但 也 有 一 个 好 处 : VS 2008 
没有 对 标记 扩展 提供 智能 语法 提示 ，VS 2010 已 经 很 好 地 支持 了 对 标记 
扩展 进行 祝 能 语法 所 示 ， 而 使 用 属性 标签 却 可 以 充分 利用 VS 2008858 


能 提示 。 


尽管 标记 扩展 的 语法 简洁 方便 ， 但 并 不 是 所 有 对 象 都 能 用 标记 扩展 的 
语法 来 书写 ， 只 有 MarkupExtension 类 的 派生 类 (直接 或 间接 均 可 ) 才 
能 使 用 标记 扩展 语法 来 创建 对 象 。MarkupExtension 的 直接 派生 类 并 不 


多 > 它们 是 : 


e System.Windows.ColorConvertedBitmapExtension 
e System.Windows.Data.BindingBase 

e System.Windows.Data.RelativeSource 

e System.Windows.DynamicResourceExtension 

e System.Windows.Markup.ArrayExtension 

e System.Windows.Markup.NullExtension 


e System.Windows.Markup.StaticExtension 


e System.Windows.Markup.TypeExtension 

e System.Windows.ResourceKey 

e System.Windows.StaticResourceExtension 

e System.Windows.TemplateBindingExtension 
e System.Windows.ThemeDictionaryExtension 
后 面 的 章节 将 对 这 些 标记 扩展 类 进行 详细 说 明 。 
注意 

最 后 ， 使 用 标记 扩展 时 还 需要 注意 以 下 几 点 : 


e MUI Ran UREK, Al dl Text" {Binding Source-(StaticResource myDataSource}, 
Path=PersonName}" 是 正确 的 语法 。 


e 标记 扩展 具有 一 些 简写 语法 ， 例 如 "{Binding Value,...}" 与 "{Binding Path=Value,...}" 是 等 价 
的 、"{StaticResource myString,.. y Ej"(StaticResource ResourceKey- myString,...]' 是 等 价 的 。 两 
种 写法 中 ， 前 者 称 为 固定 位 md (Positional Parameter) ， 后 者 称 为 具名 参数 (Named 
Parameters) 。 固 定位 置 参 数 实际 上 就 是 标记 扩展 类 构造 器 的 参数 ， 其 位 置 由 构造 器 参数 列表 


决定 。 


e 标记 扩展 类 的 类 名 均 以 单词 Extension 为 后 级 ， 在 XAML 使 用 它们 的 时 候 Extension 后 缀 可 以 
省 略 不 写 ， 比 如 写 Text="{x:Static...}" 与 写 Text="{x:StaticExtension...}" 是 等 价 的 。 


n 


3.3 ”事件 处 理 器 与 代码 后 置 


我 们 已 经 知道 ， 当 一 个 XAML 标 签 对 应 着 一 ,这 个 宗谷 的 一 
部 分 Attribute 会 对 应 这 个 对 象 的 Property ° 除了 这 部 分 对 应 着 对 象 
Property 的 Attribute 外 ， 还 有 一 部 分 Attribute 对 应 * 对 象 的 事件 

(Event) 。 <Button> 标 答 有 一 个 名 为 Click 的 Attribute， 它 对 应 的 就 是 
Button 类 的 Click 事 件 。 


在 .NET 事 件 处 理 机 制 中 ， 可 以 为 对 象 的 某 个 事件 指定 一 个 能 与 该 事件 
匹配 的 成 员 函 数 ， 当 这 个 事件 发 生 时 ，.NET 运 行 时 会 去 调用 这 个 画 
数 ， 即 表示 对 这 个 事件 的 响应 和 处 理 。 因 此， 我 们 把 这 个 函数 称 为“ 事 


件 处 理 器 ”(Event Handler) 。WPF 支 持 在 XAML 里 为 对 象 的 事件 指定 
事件 处 理 器 ， 方 法 是 使 用 事件 处 理 髓 的 画 数 名 为 对 应 对 象 事件 的 
Attribute 进 行 赋值 : 


<ClassName EventName-"EventHandlerName" /» 


当 我 们 为 一 个 XAML 标 签 的 事件 性 Attribute 进 行 赋值 时 ，XAML 编辑 器 

会 自动 为 我 们 生成 相应 的 事件 处 理 器 。 事 件 处 理 器 是 使 用 C# 语 言 编写 

Pen 以 <Button> 标 签 为 例 ， 当 为 Click 赋 值 时 ， 你 会 看 到 如 图 3-7 中 
示 的 提示 。 


«Button xName="button1" Click=" l 


图 3-7 ”为 Click 赋 值 时 显示 的 提示 信息 


如 果 此 时 按 下 Enter 键 ，VS 2008 会 自动 为 我 们 生成 一 个 事件 处 理 器 ， 并 
把 它 的 名 字 (HAZ) 赋值 给 Click。 此 时 的 XAML 代 码 是 : 


«Button x:Name="button1" Click-"button]. Click"/» 


fEbuttonl Click EA ri, TER HIE "E. H ii f$ Navigate to Event Handler 
(如 图 3-8 所 示 ) ， 就 可 跳 转 到 由 VS 2008 上 自动 生成 的 事件 处 理 器 中 。 


«Button x Name-"button1" Click-"button?—C^»l-"i» 
View Designer 


View Code 
Navigate to Event Handler 
Cut 


Copy 
Paste 
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Outlining j 


图 3-8 ”弹出 菜单 中 的 Navigate to Event Handler 选 项 


事件 处 理 器 的 函数 声明 与 用 于 声明 Button.Click 事 件 的 委托 保持 类 型 和 
参数 上 的 一 致 ， 它 的 名 字 已 经 被 拷贝 到 XAML 代 码 中 。 


private void button]. Click(object sender, RoutedEventArgs e) 
| 


1 
j 


如 果 把 <Button x:Name="button1" Click="button1_Click"/> 这 人 句 代码 翻译 
成 C# 代 人 码 ， 基 本 上 是 这 样 : 


Button button! = new Button(); 
button] .Click*-new RoutedEventHandler(button]. Click); 


我 们 知道 ，C# 语 言 编 写 的 代码 应 该 用 于 处 理 程序 的 逻辑 ， 需 要 让 它 与 
表示 UI 的 XAML 代 码 分 开 。 这 些 C# 函 数 会 放 在 哪里 呢 ? 由 于 C# 支 持 
partial 类 ，XAML 标 签 又 可 以 使 用 x:Class 特 征 指 定 将 由 XAML 代 码 解 析 
生成 的 类 与 哪个 类 合并 ， 因 此 ， 我 们 完全 可 以 把 用 于 实现 程序 逻辑 的 
C# 代 码 放 在 一 个 文件 里 ， 把 用 于 描述 程序 UI 的 XAML 代 码 放 在 男 一 个 


文件 里 ， 并 且 让 事件 性 Attribute 充 当 XAML 与 C# 之 间 沟 通 的 纽带 一 一 设 
计 师 用 XAML 为 程序 创建 漂亮 的 * 壳 ”(〈UI) 并 展现 给 客户 ; 程序 员 用 
C# 编 写 程序 的 “车”( 逻 辑 ) 、 从 后 台 支 持 前 面 的“ 壳 ” 一 一 这 种 将 逻辑 
代码 与 UI 代码 分 离 、 隐 藏 在 UI 代码 后 面 的 形式 就 叫 作 “代码 后 
置 ” (Code-Behind) ° 


注意 


之 所 以 能 实现 代码 后 置 功 能 ， 是 因为 .NET 文 持 partial 类 并 能 将 解析 XAML 所 生成 的 代码 与 
x:Class 所 指定 的 类 进行 合并 。 有 两 点 需要 注意 的 是 : 


e 不 只 是 事件 处 理 器 ， 一 切 用 于 实现 程序 逻辑 的 代码 都 要 放 在 后 置 的 C# 文 件 


e 默认 情况 下 ，VS 2008 为 每 个 XAML 文 件 生成 的 后 置 代码 文件 名 为 “XAML 文 件 全 名 .cs”， 比 
如 XAML 文 件 名 为 MyWindow.xaml， 那 么 它 的 后 置 代码 文件 名 为 MyWindow.xaml.cs。 这样 做 是 
为 了 方便 管理 文件 ， 但 并 不 是 必须 的 ， 只 要 XAML 解 析 器 能 找到 x:Class 所 指定 的 类 ， 无 论 你 的 
文件 叫 什么 名 字 都 可 以 。 


H 


I] o 


ae 


最 后 ， 给 大 家 介绍 一 个 有 意思 的 标签 一 一 x:Code ， 使 用 它 可 以 把 本 来 
应 该 采 在 后 置 代码 里 的 C# 代 码 搬 到 XAML 文 件 里 来 。x:Code 的 内 容 一 
定 要 使 用 XML 语言 的 <![CDATA[...]]> 转 义 标 签 。 


«Window x:Class-"WpfApplicationTree, Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title" Window" Height-"200" Width-"200"» 
«Grid» 
«Button x: Name-"button]" Content-"OK" Click-"button]. Click"/» 


«lard» 


«x:Code? 
«![CDATA[ 
private void button! Click(object sender, RoutedEventArgs e) 


MessageBox.Show("Bye! Code-Behind!"); 


|> 
</x:Code> 


</Window> 


3.4 ”导入 程序 集 和 引用 其 中 的 名 称 空 间 


大 多 数 情况 下 ， 根 据 架 构 设 计 一 个 程序 会 被 分 成 若干 个 相对 独立 的 模 
块 来 编写 ， 每 个 模块 可 以 独立 编译 、 进 行 版 本 升级 。 模 块 与 模块 之 间 
有 了 时 会 存在 一 些 依赖 关系 ， 即 有 些 模块 需要 “借用 ”其 他 模块 中 的 功 
能 。.NET 的 模块 称 为 程序 集 (Assembly) 。 一 般 情况 下 ， 使 用 VS 2008 
创建 的 是 解决 方案 (Solution) ， 一 个 解决 方案 就 是 一 个 完整 的 程序 。 
解决 方案 中 会 包含 若干 个 项 目 (Project) ， 每 个 项 目 是 可 以 独立 编译 
的 ， 它 的 编译 结果 就 是 一 个 程序 集 。 常 见 的 程序 集 是 以 .exe 为 扩展 名 的 
可 执行 程序 或 者 是 以 .d 为 扩展 名 的 动态 链接 库 ， 大 多 数 情况 下 ， 我 们 
说 “引用 其 他 程序 集 ” 的 时 候 ， 说 的 都 是 动态 链接 库 。 因 为 .NET 编 程 接 
[1 (Application Programming Interface, API) 以 类 和 类 级 别 的 单元 为 主 
QUARTA ， 所 以 我 们 又 常 把 引用 程序 集 说 成 是 引用 
车 o 


类 库 中 的 类 一 般 都 会 安置 在 合适 的 名 称 空 间 中 ， 名 称 空间 的 作用 是 避 
免 同 名 类 的 冲突 。 比 如 一 个 程序 中 引用 了 LibA.dll 和 LibB.dll 两 个 类 库 ， 


这 两 个 类 库 中 都 有 一 个 叫 Converter 的 类 ， 如 果 没 有 名 称 空间 来 限定 的 
话 ， 编 译 器 将 分 不 清 程 序 员 打 算 使 用 哪个 类 。 如 果 LibA.dl 中 的 
Converter 放 在 一 个 名 为 Microsoft 的 名 称 空 间 里 ，LibB.dll 中 的 Converter 
放 在 名 为 Google 名 称 空间 里 ， 程 序 员 就 可 以 通过 Microsoft.Converter 和 
Google.Converter 来 区 分 这 两 个 类 了 » 


注意 


想 在 自己 的 程序 里 引用 类 库 ， 需 要 分 三 步 来 做 : 


ED 


人 编译 的 .dl 文件 。 


(1) 编写 类 库 项 目 并 编译 得 到 .dl 文件 或 者 获得 另 
(2) 将 类 库 项 目 或 者 .dl 文件 引用 进 自己 的 项 目 。 
引用 类 库 中 的 名 称 空间 。 


pun 


(3) 在 C# 和 XAML 


作为 常识 ， 编 写 和 引用 类 库 项 目 在 此 不 再 袭 述 。 我 们 只 看 如 何在 
XAML 里 引用 类 库 中 的 名 称 空间 和 类 。 需 要 记 住 一 点 : 把 类 库 引 用 到 
项 目 中 是 引用 其 中 名 称 空间 的 物理 基础 ， 无 论 是 C# 还 是 XAML 都 是 这 
样 。 一 旦 将 一 个 类 库 引 用 进程 序 ， 就 可 以 引用 其 中 的 名 称 空间 。 假 设 
我 的 类 库 程 序 集 名 为 MyLibrary.d1， 其 中 包含 Common 和 Controls 两 个 名 
称 空间 ， 而 且 已 经 把 这 个 程序 集 引 用 进 WPF 项 目 ， 那 么 在 XAML 中 引 
用 这 两 个 名 称 空间 的 语法 是 : 


xmins: 喘 射 名 ="clr-namespace: 类 库 中 名 称 空间 的 名 字 ;assembly= 类 库 文件 名 " 


对 于 MyLibrary.dll 里 的 两 个 名 称 空间 ，XAML 中 的 引用 会 是 : 


xmlns:common="clr-namespace:Common;assembly=MyLibrary" 


xmlns:controls="clr-namespace:Controls;assembly=MyLibrary" 


让 我 们 分 析 一 下 XAML 引 用 名 称 空 间 的 语法 。 


e xmlns 征用 于 在 XAML 中 声明 名 称 空间 的 Attribute， 它 从 XML 语言 继 
承 而 来 ， 是 XML Namespace 的 缩写 。 


e BSRR EAN, THER T n] EASTER A5 BA A 4 TH 
已 经 被 WPF 的 主要 名 称 空间 占用 ， 所 以 所 引用 的 名 称 空间 都 需要 加 上 
这 个 映射 名 。 有 轴 射 名 可 以 根据 喜好 目 由 选择 ， 但 团队 内 部 最 好 使 用 一 
致 的 命名 。 一 个 建议 就 是 使 用 类 库 中 名 称 空间 的 原名 或 者 缩写 。 


e 3 引号 中 的 字符 串 值 确定 了 你 要 引用 的 是 哪个 类 库 以 及 类 库 中 的 哪个 
名 称 空间 。 我 知道 这 个 字符 串 的 写法 看 上 去 挺 矿 烦 ， 垃 好 XAML 编 辑 
器 可 以 帮助 我 们 自动 填充 它 (如 图 3-9 所 示 ) ° 


| xmins:x-"http-//schemas.microsoft com/winfx/2006/xaml" 

4| —xminscommons'] 

sl NM | 地 http://schemas.microsoft.com/xps/2005/06 

il sif) http://schemas.microsoft.com/xps/2005/06/documentstructure 
| «Grid» P WpfApplicationRef in assembly WpfApplicationRef | 

9.L «Window WpfApplicationRef Properties in assembly WpfApplicationRef 
10 sf" Common in assembly MyLibrary 


sif Controls in assembly MyLibrary 


af Microsoft.CSharp in assembly System 

«if Microsoft.SglServer.Server in assembly System.Data 
sf Microsoft.VisualBasic in assembly System 

sif Microsoft. Win32 in assembly mscorlib 


图 3-9 XAML 编 辑 器 的 自动 填充 功能 


一 旦 我 们 将 类 库 中 的 名 称 空间 引用 XAML 文 档 ， 我 们 就 可 以 使 用 这 些 
名 称 空 间 里 的 类 。 语 法 格式 是 : 


MHARA.. «E e no 


例如 使 用 Common 和 Controls 中 的 类 ， 代 码 是 这 样 : 


<common:MessagePanel x:Name-" windowl"/» 
«controls; LedButton x: Name-"button1"/» 


附加 一 点 额外 的 小 知识 。 我 们 发 现 ，XAML 中 引用 名 称 空 间 的 语法 与 
C# 不 太一 样 。 最 大 的 差别 就 是 XAML 需 要 为 被 引用 的 名 称 空间 添加 一 
个 映 映 名， 用 这 个 映 册 名 来 代表 锐 引 用 的 名 称 空间 。 其 实 ，C# 也 可 以 


这 样 引 用 名 称 空间 ， 只 是 不 经 常用 爱 了 。 比 如 ， 在 C# 中 引用 Common 
和 Controls 名 称 空间 时 可 以 这 样 写 : 


using Cmn = Common; 


using Ctl = Controls; 


这 种 写法 在 名 称 较 长 的 名 称 空 间 中 有 同名 类 时 比较 有 用 。 
3.5 XAML 的 注释 
XAMIL 的 注释 语法 亦 继 承 自 XML。 语 法 是 : 
< 需要 被 注释 控 的 内 容 -> 
注意 
有 几 点 需要 注意 的 是 : 


。 XAML 注 释 只 能 出 现在 标签 的 内 容 区 域 ， 即 只 能 出 现在 开始 标签 和 结束 标签 之 间 。 


e XAML 注 释 不 能 用 于 注释 标签 的 Attribute。 


e XAMLIEREETBEBUR ° 
3.6 小 结 


至 此 ， 我 们 已 经 走马 观 伦 地 了 解 了 XAML 的 基本 语法 。 知 识 虽 然 不 
多 ,但 足以 保障 我 们 写 出 美观 的 程序 。 要 提醒 大 家 的 是 ，XAML 是 一 
种 很 灵活 的 语言 ， 竺 别 是 一 些 用 于 简化 代码 的 缩 略 写法 。 这 些 看 上 去 
比较 奇怪 的 写法 基本 上 无 法 系统 地 用 章节 来 描述 ， 只 能 依靠 我 们 在 实 
际 工作 中 慢 慢 积累 。 不 过 不 用 担心 ， 一 般 情 况 下 比较 复杂 的 代码 都 能 
T 比如 接 下 来 的 一 章 一 一 x 名 称 空间 详 


4 


字母 “xz" 给 人 的 感觉 历来 是 未 知 、 神 秘 、 酷 .………. 不 过 ， 初 学 者 却 经 常 被 
它 搞 得 晕 头 转向 。 那 么 x 名 称 空间 是 怎么 来 的 、 又 是 做 什么 用 的 呢 ? 简 
单 来 说 ，“ 皂 名 称 空间 ”的 这 个 x 是 映射 XML 名 称 空 间 时 给 它 取 的 名 字 

(如 果 用 的 是 字母 y， 那 它 就 应 该 叫 “y 名 称 空间 了 ”) ; x 名 称 空间 里 的 
成 员 (如 x:Class、x:Name) 是 专门 写 给 XAML 编 译 器 看 、 用 来 引导 
XAML 编 译 器 把 XAML 代 码 编译 成 CLR 代 码 的 (所 以 这 个 x 不 是 为 了 
酷 ， 而 是 XAML 的 首 字母 ) 。 


K A O8 € XAML 代码 的 WPF 程 序 都 需要 通过 语句 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 来 引 入 
http://schemas.microsoft.com/winfx/2006/xaml 这 个 名 称 空间 。 


这 一 章 我 们 将 深入 这 个 名 称 空间 去 一 探究 竟 ， 人 研究 一 下 里 面 到 的 都 有 
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41 x 名 称 空 间 里 都 有 什么 


x 名 称 空间 映射 的 是 http://schemas.microsoft.com/winfx/2006/xaml， 望 文 
生 义 ， 它 包含 的 类 均 与 解析 XAML 语 言 相 关 ， 所 以 亦 可 称 之 为 “XAML 
名 称 空间 ”。 


与 C# 语 言 一 样 ，XAML 也 有 上 自己 的 编译 器 。XAML 语 言 会 被 解析 并 编 
译 ， 最 终 形成 微软 中 间 语 言 存 储 在 程序 集中 。 在 解析 和 编译 XAML 语 
言 的 过 程 中 ， 我 们 经 常 需要 告诉 编译 器 一 些 重 要 的 信息 ， 比 如 XAML 
代码 的 编译 结果 应 该 与 哪个 C# 代 码 的 编译 结果 合并 、 使 用 XAML 声 明 
的 元 素 是 public 还 是 private 访 问 级 别 等 等 。 这 些 让 程序 员 能 够 与 XAML 
编译 器 沟通 的 工具 就 存放 在 x 名 称 空间 中 。 如 表 4-1 所 示 。 


表 4-1 x 名 称 空 间 中 包含 的 工具 


名 称 种 类 (在 XAML 中 出 现 的 形式 ) 
x:Array 标签 扩展 
x:Class Attribute 


x:ClassModifier Attribute 


续 表 


名 称 种 类 (在 XAML 中 出 现 的 形式 ) 

x:Code XAML 指令 元 素 
x:FieldModifier Attribute 

x:Key Attribute 

x: Name Attribute 

x:Null 标签 扩展 
x:Shared Attribute 

x Static 标签 扩展 
x:Subclass Attribute 

x: Type 标签 扩展 
x:TypeArguments Attribute 

x:Uid Attribute 
x:XData XAML 指令 元 素 


我 们 注意 到 ， 它 们 可 以 分 为 Attribute、 标 记 扩 展 和 XAML 指 令 元 素 三 
类 。 下 面 分 别 说 一 说 它们 的 功能 。 


42 x 名 称 空间 中 的 Attribute 


前 面 我 们 已 经 知道 ，Attribute 与 Property 是 两 个 层面 的 东西 。Attribute 是 
语言 层面 的 东西 、 是 给 编译 器 看 的 ，Property 是 面 癌 对 象 层面 的 东西 、 
是 给 编程 逻辑 用 的 ， 而 且 一 个 XAML 标 签 的 Attribute 里 大 部 分 都 对 应 着 
对 和 象 的 Property。 在 使 用 XAML 编 程 的 时 候 ， 如 果 你 想 给 它 加 上 一 些 特 
殊 的 标记 从 而 影响 XAML 编 译 器 对 它 的 解析 ， 这 时 候 就 需要 额外 为 它 
添加 一 些 Attribute 了 “。 比 如 ， 你 想 告 诉 XAML 编 译 器 将 编译 结果 与 哪个 
C# 编 译 的 类 合并 ， 这 时 候 束 必须 为 这 个 标签 添加 x:Class=" 目 标 类 名 "这 
样 一 个 Attribute 以 告知 XAML 编 译 侨 。x:Class 这 个 Attribute 并 不 是 对 象 
的 成 员 ， 而 是 我 们 把 它 从 x 名 称 空间 里 拿 出 来 硬 贴 上 去 的 。 


让 我 们 浏 贤 一 下 常用 的 Attribute ° 


4.2.1 x:Class 


这 个 Attribute 的 作用 是 告诉 XAML 编 译 器 将 XAML 标 签 的 编译 结果 与 后 
台 代 码 中 指定 的 类 合并 。 在 使 用 x:Class 时 必须 遵循 以 下 要 求 : 


e 这 个 Attribute 只 能 用 于 根 结 点 。 


使 用 x:Class 的 根 结 点 的 类 型 要 与 x:Class 的 值 所 指示 的 类 型 保持 一 
ZH o 


e xXx:Class 的 值 所 指示 的 类 型 在 声明 时 必须 使 用 partial 天 键 字 。 
e x:Class 已 经 在 剖析 最 简单 的 WPF 程 序 时 讲 过 ， 此 处 不 再 长 述 。 
4.2.2  x:ClassModifier 


这 个 Attribute 的 作用 是 告诉 XAML 编 译 由 标签 编译 生成 的 类 具有 怎样 的 
访问 控制 级 别 。 


注意 


使 用 这 个 Attribute 时 需要 注意 : 


e 标签 必须 具有 x:Class Attribute ° 


e X:ClassModifier 的 值 必须 与 x:Class 所 指示 类 的 访问 控制 级 别 一 致 。 


e x:ClassModifier 的 值 随后 台 代 码 的 编译 语言 不 同 而 有 所 不 同 ， 参 见 TypeAttributes 榴 举 类 型 。 


这 里 举 个 例子 。 移 创建 一 个 WPF 项 目 并 编译 它 ， 把 编译 结果 用 开 反 编 
详 需 打开 ， 你 会 看 到 Window1 这 个 类 的 访问 级 别 为 public， 如 图 4-1 所 
ZR œ 


S-E worapplicationt 
由 -也 wpfapplicationt Properties 
由 -有 WpfApplication1.App 
一 DB icak j 


> ,class public auto ansi beforefieldinit 


extends [PresentationFramework]System. Wind. 
P implements [WindowsBase]System. Windows. Me — 
® contentLoaded ; private bool 
— MEI .ctor : void() 
171 " 


assembly WpfApplicationi 
1 : 


图 4-1 类 Window1 的 访问 级 别 为 public 


然 后， 为 XAML 文档 中 的 <Window> 标签 加 上 
x:ClassModifier="internal"。 此 时 如 果 编 译 则 会 收 到 一 个 编译 错误 ， 告 
诉 你 类 的 定义 有 冲突 。 我 们 去 C# 文 件 里 找到 Window1 类 的 声明 ， 把 声 
明 中 的 public 也 改 成 intemal， 然 后 再 编译 。 把 编译 的 结果 用 I 开 反 编译 妖 
打开 ， 你 会 看 到 类 的 访问 级 别 变 成 了 private (之 所 以 是 private 而 不 是 
internal 是 因为 程序 集 级 别 的 internal 与 private 等 价 ) ， 如 图 4-2 所 示 。 


F CAUsersVAdministratonDocumentsVVis... [as 
File View Help 


&- NJ) wpfapplicationl 
t- wpfApplicationt .Properties 
&- BE wprApplicationt .App 
- WE wpfApplicationl.win dow 


RE [PresentationFramework]System. wi 
b implements [WindowsBase]System, Windows. 
G contentLoaded : private bool 
Bl ,ctor : void 
a IniializeComponent : void) 


图 4-2 ”类 Window1 的 访问 级 别 变 为 了 private 
4.2.3 x:Name 


我 们 已 经 多 次 提 到 XAML 有 是 一 种 声明 式 语言 ， 但 你 是 否 想 过 XAML 标 
签 声名 的 是 什么 呢 ? 其 实 ，XAML 的 标签 声明 的 是 对 象 ， 一 个 XAML 
标签 会 对 应 着 一 个 对 象 ， 这 个 对 象 一 般 是 一 个 控件 类 的 实例 。 在 .NET 
平台 上 ， 类 是 引用 类 型 。 引 用 类 型 的 实例 在 使 用 时 一 般 是 以 “引用 者 -~ 
实例 ?的 形式 成 对 出 现 的 ， 而 且 我 们 只 能 通过 引用 者 来 访问 实例 。 当 一 
个 实例 个 再 被 任何 引用 阁 所 引用 时 ， EDA W EN FA i o 
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LE revise ue 这 并 不 是 唯一 的 。 比 如 下 面 这 段 XAML 


«Window x:Class-"WpfApplicationl Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Window]" Height-"300" Width-"300"» 
<StackPanel> 

<TextBox Margin-"5" /> 
«Button Content="OK" Margin-"5" Click="Button_Click" /> 
</StackPanel> 

</Window> 


这 段 代 码 中 通 篇 没有 出 现 一 个 名 字 ， 但 我 们 却 可 以 通过 引用 者 的 层级 
天 系 来 找到 我 们 最 终 想 要 的 控件 。 下 面 是 Button 的 Click 事 件 处 理 融 : 


private void Button. Click(object sender, RoutedEventArgs e) 


| 
1 


StackPanel stackPanel = this.Content as StackPanel; 
TextBox textBox = stackPanel.Children[0] as TextBox; 
if (string.IsNullOrEmpty(textBox.Name)) 


| 
t 


textBox.Text = "No name!"; 


textBox.Text = textBox.Name; 


Window1.Content 属 性 引用 着 StackPanel 的 实例 ， 而 StackPanel 实 例 的 
Children[0] 又 引用 着 TextBox 的 实例 〈 在 C# 中 ， 集 合 索引 器 又 称 为 “ 融 参 
数 的 属性 ”) 。 知 道 了 这 个 关系 ， 就 可 以 一 路 顺 着 查找 下 来 并 同时 进行 
类 型 转换 。 最 后 ， 文 本 框 里 显示 “No name!” ° 


虽然 理论 上 我 们 可 以 使 用 这 种 方法 访问 到 UI 上 的 所 有 元 素 ， 但 这 毕竟 
KT o RE: XAML 这 种 对 象 声 明 语言 只 负责 声明 对 象 而 不 


负责 为 这 些 对 象 声 明 引用 变量 。 如 果 我 们 需要 为 对 象 准备 一 个 引用 变 
量 以 便 在 C# 代 人 码 中 直接 访问 束 必 须 显 式 地 告诉 XAML 编 译 需 一 一 为 这 
个 对 象 声 明 引用 变量 ， 这 时 x:Name 就 派 上 上 用场。 

注意 


x:Name 的 作用 有 两 个 : 


(1) 告诉 XAML 编 译 器 ， 当 一 个 标签 带 有 x:Name 时 除了 为 这 个 标签 生成 对 应 实例 外 还 要 为 这 
个 实例 声明 一 个 引用 变量 ， 变 量 名 就 是 x:Name 的 值 。 


(2) 将 XAML 标 签 所 对 应 对 象 的 Name 属 性 (如 果 有 ) 也 设 为 x:Name 的 值 ， 并 把 这 个 值 注 册 到 
UI 树 上 ， 以 方便 查找 。 


让 我 们 做 个 小 实验 一 一 把 上 面 的 代码 的 编译 结果 用 I 开 反 编译 絮 打 开 ， 
你 会 发 现 Window1 类 里 不 包含 任何 字段 。 然 后 为 <TextBox> 标 签 添 加 
x:Name， 代 码 变 成 这 样 : 


<StackPanel> 
«TextBox x:Name="textBox" Margin-"5" /> 
«Button Content-"OK" Margin-"5" Click-"Button Click" /> 


</StackPanel> 


因为 TextBox 的 实例 由 名 为 textBox 的 引用 变量 所 引用 ， 所 以 我 们 可 以 通 
过 引用 变量 直接 访问 实例 ，Button.Click 事 件 处 理 器 中 的 间接 查找 代码 
tg. n] DLE RES: 


private void Button. Click(object sender, RoutedEventArgs e) 


J 
1 


l/StackPanel stackPanel = this.Content as StackPanel; 
l/TextBox textBox = stackPanel.Children[0] as TextBox; 
if (string.IsNullOrEmpty(textBox.Name)) 


textBox.Text = "No name!"; 


textBox.Text = textBox. Name; 


单 击 按钮 后 ，TextBox 中 出 现 *textBox”， 说 明 x:Name 不 但 让 编译 器 声明 
了 3 引用 变量 ， 同 时 还 为 实例 的 Name 属 性 赋 了 值 。 使 用 I 开 反 编译 器 查看 
编译 结果 ， 你 能 在 Window1 类 中 找到 textBox 这 个 字段 。 注 意 ， 如 果 一 
个 标签 对 应 的 实例 没有 Name 这 个 属性 ， 那 么 x:Name 作 用 就 只 剩 下 为 这 
个 实例 创建 引用 变量 了 。 


经 常会 有 初学 者 问 : 在 XAML 代码 中 是 应 该 使 用 Name 呢 ， 还 是 
x:Name? Name 属 性 定义 在 FrameworkElement 类 中 ， 这 个 类 是 WPF 控 件 
的 其 类 ， 所 以 所 有 WPF 控 件 都 具有 Name 这 个 属性 。 当 一 个 元 素 具 有 
Name 属 性 时 ， 你 使 用 Name 或 x:Name 鸡 果 是 一 样 的 。 比 如 <Button 
x:Name="btn"/> 和 <Button Name="btn"/>，XAML 编 译 器 的 动作 都 是 声 
明 名 为 btn 的 Button 类 型 变量 并 引用 一 个 Button 类 型 实例 ， 而 且 此 实例 的 
Name 属 性 值 亦 为 bm。 此 时 ，Name 和 x:Name 是 可 以 互 换 的 ， 只 是 不 能 
同时 出 现在 一 个 元 素 中 。 对 于 那些 没有 Name 属 性 的 元 隶 ， 为 了 在 
XAML 声 明 时 也 创建 引用 变量 以 便 在 C# 代 码 中 访问 ， 我 们 就 只 能 使 用 
x:Name。 因 为 x:Name 的 功能 泗 盖 了 Name 属 性 的 功能 ， 所 以 全 部 使 用 
x:Name 以 增强 代码 的 统一 性 和 可 读 性 。 


4.2.4 x:FieldModifier 


使 用 x:Name 后 ，XAML 标 签 对 应 的 实例 束 具 有 了 目 己 的 引用 变量 ， 而 
且 这 些 引 用 变量 部 十 类 的 字段 。 有 既然 古 类 的 了 字段 式 免不了 要 关注 一 下 


它们 的 访问 级 别 。 默 认 情 况 下 ， 这 些 字段 的 访问 级 别 按照 面向 对 象 的 
封装 原则 被 设置 成 了 internal。 在 编程 的 时 候 ， 有 时 候 我 们 需要 从 一 个 
程序 集 访 问 另 一 个 程序 集中 窗 体 的 元 素 ， 这 时 候 就 需要 把 被 访问 控件 
的 引用 变量 改 为 public 级 别 ，x:FieldModifier 就 是 用 来 在 XAML 里 改变 引 
用 变量 访问 级 别 的 。 


如 采 这 样 声 明 一 个 窗 体 中 的 控件 : 


<StackPanel> 
<TextBox x:Name-"textBox 1" x:FieldModifier-"public" Margin-"5"/» 
«TextBox x:Name7"textBox2" x:FieldModifier-"public" Margin-"5"/» 
«TextBox x:Name-"textBox3" | Margin-"5"/» 

«/StackPanel» 


EHLE REER, WLaSERSIEA-3BTSRUAGR 。 


F CAUsersVAdministrator... 


File View Help 


-P implements [WindowsBase]System.Winc a 
® _contentLoaded : private bool 

-大 textBox1 : public class [PresentationFrar 
Ê textBox2 : public class [PresentationFrar| | 


— Q9 textBox3 : assembly class [Presentationt 


Bb ,ctor ; void ad 
m | ' 


assembly WpfApplication1 
{ - 


图 4-3 ”使 用 与 不 使 用 x:FieldModifier 的 引用 变量 的 编译 结果 的 对 比 


textBox1 和 textBox2 的 访问 级 别 被 设置 为 public， 而 textBox3 的 访问 级 别 
仍 为 默认 的 internal ( 即 程序 集 级 别 ) ° 


注意 


因为 x:FieldModifier 是 用 来 改变 引用 变量 访问 级 别 的 ， 所 以 使 用 x:FieldModifier 的 前 提 是 这 个 标 
签 同 时 也 使 用 x:Name， UR ROS 变量 呢 ? 


4.2.5 x:Key 


最 自然 的 检索 方式 莫 过 于 使 用 “Key-Value” 对 的 形式 了 。 在 XAML 文 件 
中 ， 我 们 可 以 把 很 多 需要 多 次 使 用 的 内 容 提 取出 来 放 在 资源 字典 

e Dictionary) 里 ， 需 要 使 用 这 个 资源 的 时 候 就 用 它 的 Key 把 
它 检 索 出 来 。 


x:Key 的 作用 束 古 为 资源 贴 上 用 于 检索 的 索引 。 在 WPF 中 ， 几 乎 每 个 元 
素 都 有 自己 的 Resources 属 性 ， 这 个 属性 是 个 “Key-Value” 式 的 集合 ， H 
要 把 元 聚 放 进 这 个 集合 ， 这 个 元 聚 束 成 为 货源 字典 中 的 一 个 条 目 ， 当 
然 ， 为 了 能 够 检索 到 这 个 条 件 ， 就 必须 为 它 添加 xKey 。 资 源 

(Resources) 在 WPF 中 非 常 重要 ， 需要 重复 使 用 的 XAML 内 容 ， 如 
> ee 等 都 需要 放 在 资源 里 ， 我 们 将 在 后 面 的 章节 
详细 讨论 。 


在 这 里 ， 我 们 使 用 一 个 例子 简单 地 说 明 x:Key 的 用 法 e 我 们 先 在 
Window1 的 资源 字典 里 添加 一 个 条 目 ， 这 个 条 目 是 一 个 字符 串 ， 我 们 
将 在 XAML 和 C# 中 多 次 使 用 这 文 个 字符 串 。 


先 让 我 们 看 XAML 代 码 : 


«Window x:Class-"WpfApplication]. Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys-" clr-namespace:System;assembly-mscorlib" 

Title-" Window" Height-"130" Width-"200"» 
«Window.Resources 
«sys:String x:Key-"myString"»Hello WPF Resource!«/sys:String» 
«Nindow.Resources? 
«StackPanel Background-"Gray" > 
«TextBox Text-" [StaticResource ResourceKey-myString]" Margin-"5"/» 
«TextBox x: Name-"textBox |" Margin-"5"/» 
«Button Content-"Show" Click-"Button Click" Margin-"5"/» 
</StackPanel> 
</Window> 


为 了 在 XAML 中 使 用 String 类 , dX 1 用 xmlnsssys-"clr- 
namespace:System;assembly-mscorlib" 5| Hj 了 mscorlib.dl1， 并 把 其 中 的 
System 名 称 空间 映射 为 XAML 中 的 sys 名 称 空间 。 然 后 ， 我 们 使 用 属性 
标签 语法 同 Window.Resources 里 添加 了 一 个 字符 串 ， 并 把 它 的 x:Key 设 
置 为 myString。 窗 体 的 StackPanel 里 包含 了 两 个 TextBox 和 一 个 Button ° 
在 为 第 一 个 TextBox 设 置 Text 属 性 时 ， 我 们 用 到 了 myString 这 个 资源 ， 
因此 ， 程 序 一 运行 我 们 就 可 以 看 到 第 一 个 TextBox 显 示 了 资源 字符 捉 的 
值 ， 如 图 4-4 所 示 。 


图 4-4 ”示例 代码 运行 结 采 


rá: 


资源 不 但 可 以 在 XAML 中 访问 ， 在 C# 中 也 可 以 访问 。 下 面 是 
Button.Click 的 事件 处 理 需 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
string str = this.FindResource("myString") as string; 
this.textBox |. Text = str; 


| 


调用 一 个 拥有 Resources 属 性 的 对 象 的 FindResouce 方 法 就 可 以 在 它 的 资 
源 字 典 里 检索 资源 ， 检 索 到 资源 之 后 再 把 它 恢复 成 正确 的 数据 类 型 就 
可 以 使 用 了 。 单 击 按钮 之 后 ， 我 们 可 以 看 到 第 二 个 文本 框 显 示 出 同样 
的 字符 串 ， 如 图 4-5 所 示 。 


E" Windowl 


Hello WPF Resource! 


Hello WPF Resource! 


图 4-5”C# 中 访问 资源 的 结果 
4.2.6 x:Shared 


在 学 习 x:Key 时 我 们 已 经 知道 ， 一 旦 我 们 把 某 些 对 象 当 作 资 源 放 进 资 源 
字典 里 后 就 可 以 把 它们 检索 出 来 重复 使 用 。 那 么 ， 每 当 它 们 检索 到 一 
个 对 象 时 ， 我 们 得 到 的 究竟 是 同一 个 对 象 呢 ， 还 是 这 个 对 象 的 多 个 副 
本 呢 ? 这 束 要 看 我 们 给 x:Shared 赋 什么 值 了 。x:Shared 一 定 要 与 x:Key 配 
合 使 用 ， 如 果 x:Shared 的 值 为 tue， 那 么 每 次 检索 到 这 个 对 象 时 ， 我 们 
得 到 的 都 是 同一 个 对 象 ， 否 则 如 果 x:Shared 的 值 为 false， 每 次 我 们 检索 
到 这 个 对 象 时 ， 我 们 得 到 的 都 是 这 个 对 象 的 一 个 新 副本 。XAML 编 译 
髓 会 为 资源 隐藏 地 添加 x:Shared="true"， 世 就 是 说 ， 默 认 情 况 下 我 们 得 
到 的 都 是 同一 个 对 象 。 


43 x 名 称 空 间 中 的 标记 扩展 


从 前 面 的 章节 我 们 已 经 知道 ， 标 记 扩 展 (Markup Extension) 实际 上 就 
是 一 些 MarkupExtension 类 的 直接 或 间接 派生 类 。x 名 称 空间 中 残 包 含有 
一 些 这 样 的 类 ， 所 以 常 称 它们 为 x 名 称 空间 内 的 标记 扩展 。 让 我 们 近 观 
一 下 那些 常用 的 标记 扩展 。 


4.3.1 x:Type 


顾名思义 ，x:Type 的 值 应 该 是 一 个 数据 类 型 的 名 称 。 一 般 情 况 下 ， 我 们 
在 编程 中 操作 的 是 数 据 类 型 的 实例 或 者 是 实例 的 引用 ， 但 有 时 候 我 们 
也 会 用 到 数据 类 型 本 号 。 


初学 者 往往 搞 不 清 数据 类 型 与 类 、 结 构 、 枚 举 这 些 名 词 之 间 的 关系 。 
在 此 ， 我 来 澄清 一 下 。 我 们 拿 类 (Class) 来 做 分 析 。 就 “类 ”这 个 名 词 
而 言 ， 它 是 具有 双重 号 份 的 : 在 逻辑 层面 上 ， 类 是 现实 世界 对 象 经 过 
抽象 和 封闭 后 的 结果 ; 在 编程 层面 上 ， 我 们 会 使 用 这 个 类 去 创建 对 象 
和 引用 。 当 我 们 使 用 一 个 类 去 创建 对 象 的 时 候 ， 编 译 器 会 以 这 个 类 为 
蓝本 、 按 照 类 的 成 员 的 多 朝 在 内 存 中 开辟 出 相应 大 小 的 一 块 内 存 ， 并 
用 程序 员 指 定 的 构造 器 刷新 ( 即 初始 化 ) 这 块 内 存 。 这 时 候 ， 类 所 充 
当 的 角色 就 是 对 象 的 “模具 ”， 使 用 它 创 建 出 来 的 对 象 在 型 号 ( 即 内 存 
大 小 ) 和 内 部 布局 上 都 完全 一 样 。 在 这 个 层面 上 ， 我 们 把 类 称 为 数据 
类 型 (Type) ， 其 实 ，Type 这 个 词 本 身 就 具有 型 号 的 意思 。 以 此 类 
推 ， 结 构 、 枚 举 等 也 都 是 数据 类 型 。 同 时 ， 为 了 能 让 程序 员 在 编程 层 
面 上 自由 地 操作 这 些 数据 类 型 ， 比 如 在 不 知道 具体 数据 类 型 的 情况 下 
创建 这 个 类 型 的 实例 并 党 试 调用 它 的 方法 ，.NET Framework F LEE 
了 名 为 Type 的 类 作为 所 有 数据 类 型 在 编程 层面 上 的 抽象 。 

当 我 们 在 XAML 中 想 表 达 某 个 数据 类 型 时 就 需要 使 用 x:Type 标 记 扩 展 。 
比如 某 个 类 的 一 个 属性 ， 它 的 值 要 求 是 一 种 数据 类 型 ， 当 我 们 在 
XAML 为 这 个 属性 赋值 时 就 要 使 用 x:Type。 请 看 下 面 这 个 例子 : 


首先 ， 我 创建 了 一 个 Button 的 派生 类 。 


class MyButton : Button 
1 
| 


public Type UserWindowType | get; set; } 


protected override void OnClick() 
| 
base.OnClick(); // WOR Click 事件 
Window win = Activator.CreateInstance(this.UserWindowType) as Window; 
if (win != null) 
| 
win.ShowDialog(); 


个 类 具有 一 个 Type 基 型 的 属性 ， 即 UserWindowType， 你 需要 把 一 种 

EU HRS pos 同时 ， 这 个 类 还 重 写 了 基 类 的 OnClick 方 法 

还 会 使 用 UserWindowType 

所 存储 的 类 型 创建 一 个 实例 | 如 果 这 个 实例 是 Window 类 (或 其 派生 
类 ) 的 实例 ， 那 么 就 把 这 个 窗 体 显示 出 来 。 


然后 ， 在 项 目 里 添加 了 一 个 名 MyWindowijWindow 派 生 类 。 它 的 UI 
包含 二 个 TextBox 和 一 个 Button， 背 景 为 浅 监 


«Window x:Class="WpfApplicationl.MyWindow" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-" MyWindow" Height-"170" Width-"200"» 
«StackPanel Background-"LightBlue"» 

«TextBox Margin-"5"/» 
«TextBox Margin-"5"/» 
«TextBox Margin-"5"/» 
«Button Content-"OK" Margin-"5"/» 
«/StackPanel» 
</Window> 


最 后 ， 把 自 定 义 按钮 添加 到 主 窗口 的 界面 上 ， 并 把 MyWindow 作 为 一 种 
数据 类 型 赋值 给 MyButton.UserWindowType 属 性 


«Window x:Class-"WpfApplication] .Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winf/2006/xaml" 
xmins:local-"clr-namespace: Wpf Application] " 

Title-"Window]" Height-"300" Width-"300"» 


<StackPanel> 
<local:MyButton Content-"Show" UserWindowType-" {x:Type TypeName=local:MyWindow}" Margin-"5"/» 
</StackPanel> 
</Window> 
注意 
因为 MyButton 和 MyWindow 这 两 个 自 定 义 类 都 包含 在 当前 项 目的 名 称 空 间 里 ， 所 以 把 当前 项 目 


的 名 称 空 间 引 用 进来 并 用 local 前 缀 映射 : xmlns:local="clr-namespace: a 在 使 用 
MyButton 和 MyWindow 时 也 要 为 它们 加 上 local 前 组 。 


回顾 一 下 标记 扩展 的 语法 ， Al ^J TypeExtension K HJf^ 造 右 可 以 接受 数 
据 类 型 名 作为 参数 ， 所 以 我 们 完全 可 以 这 样 写 : 


UserWindowType-" {x:Type local: My Window|" 


编译 并 运行 程序 ， 单 击 主 窗 体 上 的 按钮 ， 自 定义 窗 体 就 会 显示 出 来 ， 
如 图 4-6 所 示 。 我 们 还 可 以 多 写 几 个 自 定义 窗 体 类 来 扩展 这 个 程序 ， 到 
时 候 只 需要 在 XAML 里 更 换 UserWindowType 的 值 就 可 以 了 。 


W' Windowl 


图 4-6 程序 的 运行 结果 


4.3.2  x:Null 


有 时候 我 们 需要 显 式 地 对 一 个 属性 赋 一 个 空 值 。 在 C# 语 言 里 ， 使 用 null 
0 
= j | o 


大 多 数 时 候 我 们 不 用 显 式 地 为 一 个 属性 赋 null 值 ， 但 如 果 一 个 属性 具有 
默认 值 而 我 们 又 不 需要 这 个 默认 值 时 就 需要 显 式 地 设置 null 值 了 。 在 
WPF 中 ，Style 的 作用 是 按照 一 定 的 审美 规格 设置 控件 的 各 个 属性 ， 程 
序 员 可 以 通过 为 控件 更 换 Style 来 产生 各 种 风格 授 异 的 效果 。 程 序 员 可 
以 逐个 为 控件 设置 Style， 也 可 以 为 一 个 Style 指 定 目标 控件 类 型 ， 一 旦 
指定 了 目标 类 型 那么 这 类 控件 的 实例 将 都 使 用 这 个 Style 一 一 除非 你 显 
式 地 将 某 个 实例 的 Style 属 性 设置 为 x:Null 。 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"x:Null Sample" Height-"300" Width-"300"» 
«Window.Resources^ 

«Style x:Key-" [x: Type Button}" TargetType-" [x: Type Button] "> 
«Setter Property-" Width" Value-"60"/» 
«Setter Property-" Height" Value-"36"/» 
«Setter Property-" Margin" Value="$"/> 
«Style» 
«/Nindow.Resources? 
<StackPanel> 
«Button Content="OK"/> 
«Button Content-" OK"/» 
«Button Content-"OK"/» 
«Button Content-"OK" Style=" [x:Null]"/» 
</StackPanel> 
</Window> 


上 面 的 例子 把 一 个 Style 放 在 了 Window 的 资源 里 并 把 它 的 x:Key 和 
TargetType 都 设置 成 了 Button 类 型 ， 这 样 ，UI 上 的 所 有 Button 探 件 都 会 
默认 地 被 套用 这 个 Style 除了 最 后 一 个 Button 因为 它 显 式 地 把 
Styleix &7J f x:Null ° 


在 这 个 Style 中 ， 把 按钮 的 Width 和 Height 设 置 成 近似 “黄金 分 割 比 ”并 在 
四 周 加 了 5 个 像素 的 留 白 ， 效 果 如 图 4-7 所 示 。 


E" x:Null Sample 


图 4-7  x:Nullz fij 


4.3.3 ”标记 扩展 实例 的 两 种 声明 语法 


前 面 我 们 已 经 认识 了 x:Type 和 x:Null 两 个 标记 扩展 ， 并 使 用 了 它们 的 转 
义 字 符 串 式 声 明 (即使 用 花 括号 括 起 来 的 字符 串 作 为 值 赋 给 标签 
Attribute 的 形式 ) 。 因 为 标记 扩展 也 是 标准 的 .NET 类 ， 所 以 ， 我 们 也 可 
以 使 用 XAML 标 签 来 声明 标记 扩展 的 实例 。 拿 上 面 x:Null 的 例子 来 说 ， 
最 后 一 个 Button 的 代码 完全 可 以 写成 这 样 : 


«Button Content="OK"> 
<Button.Style> 
<x:Null/> 
</Button.Style> 
</Button> 


这 样 做 的 喘 后 显而易见 ， 束 是 代码 太 哆 。 所 以 ， 为 了 你 持 代 码 的 信 
洁 ， 我 们 很 少 使 用 这 种 语法 。 但 有 一 个 例外 ， 那 吏 是 x:Array 标 记 扩 展 


一 一 如 果 想 在 XAML 文 档 里 声明 一 个 包含 数据 的 x:Array 实 例 ， 必 须 使 
用 标 釜 式 声明 才能 做 到 。 


4.3.4 x:Array 


x:Array 的 作用 就 是 通过 它 的 Items 属 性 向 使 用 者 又 露 一 个 类 型 已 知 的 
ArrayList 实 例 ，ArrayList 内 成 员 的 类 型 由 x:Array 的 Type 指明 。 下 面 这 个 
例子 是 把 一 个 x:Array 当 作 数 据 源 回 一 个 ListBox 提 供 数据 。 


在 WPF 中 把 包含 数据 的 对 象 称 为 数据 源 (Data Source) o 如 条 想 把 一 
个 x:Array 的 实例 作为 数据 源 提供 给 一 个 ListBox 的 话 ， 代 码 是 这 样 : 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:sysz "clr-namespace:System;assemblyzmscorlib" 
Title-"Window]" Height-"120" Width-" 160" 

«Grid Background-" LightBlue"» 
«ListBox Marginz" 5" ItemsSourcez" (x:Array Typezsys:String]"/» 
«/Grid» 


</Window> 


此 时 ， 作 为 数据 源 的 x:Array 实 例 是 没有 数据 可 提供 的 ， 所 以 需要 我 们 
为 X:Array 实 例 添 加 一 些 数据 。 这 时 问题 瓯 出 现 了 : RE endi 
深 加 数 据 需 要 调用 它 的 AddChild 方 法 ， 而 在 XAML "Pel 1751528 5522. 
辑 代码 。 同 时 ，ArrayExtension 的 Items 属 性 是 只 读 的 ， 所 以 ， 我 们 也 不 
可 能 使 用 ItemsSource-"[x: Array Type-sys:String Items=XXXXXX}" 的 形 
式 为 其 赋值 。 我 们 只 能 改 用 标签 声明 语法 ; 


«ListBox Margin-"5"» 
«ListBox.ItemsSource? 
«x: Array Typez"sys:String"» 
«sys:String» Tim«/sys:String» 
«sys:String» Tom«/sys:String» 
«sys:String» Vietor«/sys:String» 
«Ix: Array» 
«/ListBox.ItemsSource» 
</ListBox> 


这 样 ， 在 解析 <x:Array> 标 签 的 时 候 编 译 器 会 生成 调用 AddChild 方 法 的 
代码 把 <x:Array> 标 签 的 子 元 素 逐 个 添加 到 x:Array 实 例 的 Items 里 。 运 行 
程序 ， 效 果 如 图 4-8 所 示 。 


图 4-8 x:Array 应 用 示例 


最 后 ， 让 我 们 看 一 下 ArrayExtension 的 源 代码 片断 : 


public class ArrayExtension : MarkupExtension, IAddChild 
| 
private ArrayList arrayList = new ArrayList(); 
private Type. array Type; 


I| Sis 
public ArrayExtension() | } 


Ii ë Type 参数 的 构造 器 
public ArrayExtension(Type arrayType) 
{ 
js, 
array Type = arrayType; 
] 


I| 38 Array 参数 的 构造 器 
public ArrayExtension(Array elements) 


| 
_arrayList,AddRange(elements); 
_arrayType = elements.GetType().GetElementType(); 


} 


Il 向 内 部 ArrayList 实例 添加 元 素 
public void AddChild(Object value) 


| 
_arrayList,Add(value); 


public void AddText(string text) 


| 
AddChild(text); 


/Type 属性 ， 并 指明 是 XAML 中 的 固定 位 置 参数 
[ConstructorArgument("type")] 
public Type Type 
| 
get { retum. arrayType; } 
set |. arrayType = value; } 


| 


/tems 属性 ， 并 没有 要 求 具体 类 型 ， 但 一 定 是 IList 的 派生 类 
I| 特别 注意 ，Items 属性 是 只 读 的 
public IList Items 
get { return arrayList; } 


| 


i 同 使 用 者 提供 数据 
I| 注意 : 它 是 将 内 部 ArrayList 根据 Type 属性 转换 成 Array 后 以 对 象 的 形式 提供 的 
public override object Provide Value(IServiceProvider serviceProvider) 
| 
ll... 
object retArray = null; 
Hs 
retArray = arrayList. ToArray(. array Typo); 
ilo: 


return retArray; 


4.3.5 x:Static 


x:Static 十 一 个 很 音 用 的 标记 扩展 ， 它 的 功能 是 在 XAML 文 档 中 使 用 数 
据 类 型 的 static 成 员 。 因 为 XAML 不 能 编写 逻辑 代码 ， 所 以 使 用 x:Static 
访问 的 static 成 员 一 定 是 数据 类 型 的 属性 或 字段 。 我 们 看 一 个 例子 : 


首先 ， 为 Window1 添 加 两 个 static 成 员 ， 一 个 是 static 字 7 段 ， 一 个 


属性 。 


public partial class Window! : Window 
| 
public static string WindowTitle = "山高 月 小 "; 
public static string ShowText { get { return "GER H"; } } 


public Window!() 


| 
InitializeComponent(); 


然后 ， 在 XAML 中 使 用 x:Static 来 访问 这 两 个 成 员 : 


«Window x:Class-"WpfApplication].Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:localz"clr-namespace: W pfA pplication]" 

Title=" {x:Static local: Window]. WindowTitle]" Height-" 120" Width" 300" 
<StackPanel> 

<TextBlock FontSize="32" Text="{x:Static local: Window1.ShowText}"/> 
</StackPanel> 

</Window> 


运行 程序 ， 看 到 的 结果 如 图 4-9 所 示 。 


水 落石 出 


| 


图 4-9 ”运行 效果 


是 static 


注意 


HE 
H 
LH 


如 果 一 个 程序 需要 国际 化 支持 ， 一 般 会 把 需要 显示 的 字符 串 保存 在 一 个 资源 类 的 static 属 ， 
所 以 支持 国际 化 的 程序 UI 中 对 x:Static 的 使 用 非常 频繁 。 


44 XAML 指令 元 素 


XAMIL 指令 元 素 只 有 两 个 
e x:Code 
e x:XData 


我 们 已 经 在 代码 后 置 一 节 介绍 过 <x:Code> 标 签 ， 它 的 作用 就 是 可 以 包 
舍 一 些 本 应 放置 在 后 置 代码 中 的 C# 人 代码。 这 样 做 的 好 处 是 不 用 把 
XAML 代 码 和 C# 代 码 分 置 在 两 个 文件 中 ， 但 大 不 十 遇 到 茶 些 极端 环境 
B NONO 这 样 做 最 大 的 问题 束 代 码 不 好 维护 、 不 易 调 
ga ? 


x:XData 标 签 是 一 个 专用 标签 。WPF 中 把 包含 数据 的 对 象 称 为 数据 源 ， 
用 于 把 数据 源 中 的 数据 提供 给 数据 使 用 者 的 对 象 被 称 为 数据 提供 者 

(Data Provider) 。WPF 类 库 中 包含 多 种 数据 提供 者 ， 其 中 有 一 个 类 叫 
XmlDataProvider， 专 门 用 于 提供 XML 化 的 数据 。 如 果 想 在 XAML HB FS 
明 一 个 这 有 数据 的 XmlDataProvider 实 例 ， 那 么 XmlDataProvider 实 例 的 
数据 就 要 放 在 x:XData 标 签 的 内 容 里 。 示 例如 下 : 


<Window. Resources> 
«XmlDataProvider x:Key="InventoryData" XPath="Inventory/Books"> 
<x:XData> 
«Supermarket Xmlns=” > 
«Fruits» 
«Fruit Namez"Peach"/» 
«Fruit Namez"Banana"/» 
«Fruit Namez"Orange"/» 
</Fruits> 
«Drinks» 
«Drink Namez"Coca Cola"/» 
«Drink Namez"PEPSI Cola"/» 
«IDrinks» 
«Supermarket» 
«Ix:XData» 
«[XmlDataProvider» 


«AWindow.Resources? 


45 小结 

至 此 ， 我 们 可 以 说 已 经 比较 完整 地 掌握 了 XAML 的 语法 和 常用 元 素 。 
有 了 这 些 知识 ， 我 们 就 可 以 动手 去 创建 优雅 的 布局 和 炫丽 的 界面 了 。 
接 下 来 的 章节 将 使 用 前 面 学 到 的 XAML 语 法 和 x 名 称 空间 里 的 元 素 、 结 
合 琳琅 满目 的 WPF 控 件 建立 实用 的 软件 界面 。 


5 
控件 与 布局 


5.1 ”控件 到 底 是 什么 
程序 的 本 质 是 “数据 十 算法 ”一 一 用 户 输入 原始 数据 ， 算 法 处 理 原始 数 


据 并 得 到 结果 数据 。 问 题 就 在 于 程序 如 何 将 结果 数据 显示 给 用 户 。 同 
样 一 组 数据 ， 你 可 以 使 用 LED 阵 列 显示 出 来 ， 或 者 是 以 命令 行 模式 借 


助 各 种 格式 控制 字符 (如 Tab) 对 齐 并 输出 ， 但 这 些 都 不 如 图 形 化 用 户 
界面 (Graphic User Interface, GUI) 来 的 友好 和 方便 。GUI 的 方便 之 处 
在 于 它 对 数据 表达 的 直观 性 ， 程 序 员 可 以 使 用 编程 手段 把 数据 之 间 的 
关系 以 图 形 的 方式 展现 出 来 ， 从 而 免除 了 用 户 面 对 一 大 堆 抽 象 数据 的 
痛苦 ， 提 高 了 工作 效率 、 普 及 了 计算 机 的 操作 。 

GUI 是 程序 界面 的 优胜 者 ， 但 在 Windows 上 实现 图 形 化 的 界面 却 有 多 种 
方法 ， 每 种 方法 又 拥有 上 自己 的 一 套 开 发 理念 和 工具 。 每 种 GUI 开发 方法 
与 它 的 理念 和 工具 共同 组 成 一 种 方法 论 ， 常 见 的 有 : 


e Windows API (Win API) : 调用 Windows 底 层 绘图 函数 ， 使 用 C 语 
言 ， 最 原始 也 最 基础 。 


e Microsoft Foundation Class (MEC) : 使 用 C++ 语 法 将 原始 的 
Win32API 函 数 封装 成 控件 类 。 


e Visual Component Library (VCL) : Delphi 和 C++ Builder 使 用 的 与 
MFC 相 近 的 控件 类 库 。 


e Visual BasictActiveX 控 件 (VB6) : 使 用 组 件 化 的 思想 把 WinAPI 封 
装 成 UI 控件 ， 以 期 多 语言 共用 。 


e Java Swing/AWT: Java SDK 中 用 于 跨 平台 开发 GUI 程 序 的 控件 类 
库 o 


e Windows Form: .NET 平 台 上 进行 GUI 开发 的 老牌 劲旅 ， 完 全 组 件 化 
但 需要 .NET 运 行 时 支持 。 


e Windows Presentation Foundation (WPF) : 后 起 之 秀 ， 使 用 全 新 的 
数据 驱动 UI 的 理念 。 


纵览 Windows GUI 开发 历史 ， 可 以 把 上 述 这 些 方法 论 分 为 四 代 : 
e Win API 时 代 : 函数 调用 十 Windows 消 息 处 理 。 


e 封装 时 代 : 使 用 面向 对 象 理念 把 Win API 封 装 成 类 ; 由 来 自 UI 的 消 
息 驱 动 程序 处 理 数据 。 


e 组 件 化 时 代 : TEFIIEISITHTEPER TES Ael SEA AH TR: A 
PERRE, SARS o 


e WPF 时 代 : 在 组 件 化 的 基础 上 ， 使 用 专门 的 UI 设计 语言 并 引入 由 数 
据 驱 动 UI 的 理念 。 


WPF 之 所 以 能 够 称 得 上 是 新 的 一 代 关 键 在 于 两 点 : 第 一 ， 之 前 几 代 GUI 
方法 论 只 能 使 用 编程 语言 进行 UI 设计 ， 而 WPF 具 有 专门 用 于 UI 设计 的 
XAML; 第 二 ， 前 儿 代 在 UI 与 数据 的 交互 方面 是 由 Windows 消 息 到 控件 
事件 一 脉 相 承 ， 始 终 是 把 UI 控件 放 在 主导 地 位 而 把 数据 放 在 被动 地 
位 ， 用 UI 来 驱动 数据 的 改变 ，WPF 在 事件 驱动 的 基础 上 引入 了 数据 驱 
动 界 面 的 理念 ， 让 数据 重 归 核 心地 位 而 让 UI 回归 数据 表达 者 的 位 置 。 


从 现在 开始 ， 你 就 要 在 心中 树立 起 这 样 一 个 概念 一 一 WPF 中 是 数据 驱 
- 数据 是 核心 、 是 主动 的 ;UI 从 属于 数据 并 表达 数据 、 是 被 动 


UI 的 功能 是 让 用 户 观 察 和 操作 数据 ， 为 了 让 用 户 观 察 数据 ， 我 们 需要 
用 UI 元 素来 显示 数据 为 了 让 用 户 操 作 数 据 ， 我 们 需要 用 UI 元 素 啊 应 
用 户 的 操作 。WPEF 把 那些 能 够 展示 数据 、 啊 应 用 户 操 作 的 UI 元 素 称 为 
控件 (Contro) 。 控 件 所 展示 的 数据 ， 我 们 称 之 为 控件 的 “数据 内 
Z&"i 控件 在 啊 应 用 户 的 操作 后 会 执行 自己 的 一 些 方 法 或 以 事件 

(Event) 的 形式 通知 应 用 程序 (程序 员 可 以 决定 如 何 处 理 这 些 事 
件 ) ， 我 们 称 之 为 控件 的 “行为 ”或 “算法 内 容 *。 可见 ，WPF 中 的 控件 扮 
演 着 双重 角色 、 是 个 非常 抽象 的 概念 Control 是 数据 和 行为 的 载 
体 ， 而 无 需 具 有 固定 的 形象 。 换 名 话说 ，Button 之 所 以 是 Button 不 是 因 
为 它 长 得 方 方 正 正 、 显 示 一 串 文字 并 且 能 够 啊 应 用 户 单 击 ， 而 是 应 该 
倒 过 来 想 凡是 符合 “能 显示 一 些 提示 内 容 〈 可 以 是 文字 ， 也 可 以 是 
图 片 、 动 画 甚至 视频 ) 并 能 响应 用 户 单 击 ” 这 一 抽象 概念 的 UI 元 素 都 可 
以 是 Button， 至 于 一 个 Button 具 体 长 成 什么 样子 〈 是 方 是 圆 、 是 显示 文 
字 还 是 显示 动画 ) 完全 由 它 的 风格 (Style) 和 模板 (Template) 来 决 
定 ; CheckBox 之 所 以 是 CheckBox 也 不 是 因为 它 有 一 个 Box 可 供 你 Check 
只 要 是 用 来 显示 一 个 bool 类 型 值 并 允许 用 户 通 过 单 击 来 切换 
true/false/null 的 UI 元 迷 ， 那 它 束 是 一 个 CheckBox。 总 之 ， 在 WPF 中 谈 
控件 ， 我 们 关注 的 应 该 是 抽象 的 数据 和 行为 而 不 是 控件 具体 的 形象 。 
控件 的 Template 和 Style 在 后 面 章 节 有 详细 讨论 。 


粗略 而 言 ， 日 党 工作 中 我 们 打交道 最 多 的 控件 无 外 乎 6 类 ， 即 : 


(1) 布局 控件 ， PURAS ANR aE a, FBRTXIEULE 
组 织 和 排列 控件 。Grid、StackPanel、DockPanel 等 控件 都 属 此 类 ， 它 们 
拥有 共同 的 父 类 Panel 。 


(2) 内 容 控件 ， 只 能 容纳 一 个 其 他 控件 或 布局 控件 作为 它 的 内 容 。 
Window、Button 等 控件 属于 此 类 ， 因 为 只 能 容纳 一 个 控件 作为 其 内 
容 ， 所 以 经 常 需要 借助 布局 控件 来 规划 其 内 容 。 它 们 的 共同 父 类 是 


ContentControl ° 


(3) 带 标题 内 容 控 件 ， 相当 于 一 个 内 容 控件 ， 但 可 以 加 一 个 标题 
(Header) ， 标 题 部 分 亦 可 容纳 一 个 控件 或 布局 。GroupBox、TablItem 
等 是 这 类 控件 的 典型 代表 。 它 们 的 共同 父 类 是 


HeaderedContentControl ° 


(4) RHR: 可 以 显示 一 列 数据 ， 一 般 情 况 下 这 列 数据 的 类 型 相 
同 。 此 类 控件 包括 ListBox ^ ComboBox $$ » € f[] BJ E fH] X E 
ItemsControl。 此 类 控件 在 显示 集合 类 型 数据 方面 功能 非常 强大 。 


(5) 带 标题 条 日 控件 ， 相当 于 一 个 条 目 控 件 加 上 一 个 标题 显示 区 。 
TreeViewItem、Menultem 都 属于 此 类 控件 。 这 类 控件 往往 用 于 显示 层 
级 关系 数据 ， 结 点 显示 在 其 Header 区 域 ， 子 级 结 点 则 显示 在 其 条 有 目 控 
件 区 域 。 此 类 控件 的 共同 基 类 是 HeaderedItemsControl ° 

(6) 特殊 内 容 控 件 : 比如 TextBox 容 纳 的 是 字符 串 、TextBlock 可 以 容 
Wi SUAM \、Image 容 纳 图 片 类 型 数据 .……. 这 类 控件 相对 

ACH M, o 


6 类 控件 的 派生 关系 如 图 5-1 所 示 。 


DependencyObject 
UlElement 
FrameworkElement 
ContentControl ItemsControl TextBox 
HeaderedContentControl HeaderedltemsControl 


图 5-1 ”6 类 控件 的 派生 关系 


注意 


细心 的 读者 可 能 会 问 : “为 什么 要 在 FrameworkElement 处 放置 一 条 分 隔 线 TR 
FrameworkElementH] Framework 5 .NET Framework 的 Framework 是 什么 关系 ? ii 可 题 的 答案 
WPF 是 构建 在 .NET Framework 上 的 一 个 子 系统 ， 它 也 是 一 个 于 开发 应 J fE 序 的 框架 

( Framework ) , FrameworkElement 的 Framework 指 的 就 是 是 WPF Framework 。 而 
FrameworkElement 类 在 UIElement 类 的 基础 上 添加 了 很 多 专门 用 于 WPF 开 发 的 API (比如 
SetBinding 方 法 ) ， 所 以 从 这 个 类 开始 才 算是 进入 WPF 开 发 框架 。 


下 面 我 们 将 详细 地 探讨 UI 元 素 的 种 类 与 布局 。 
5.2 ”WPF 的 内 容 模 型 
日 常生 活 中 ， 内 容 的 表现 形式 多 种 多 样 一 一 草稿 纸 上 的 文字 、 公 式 和 


图 形 是 内 容 ， 报 纸 上 的 文章 是 内 容 (但 具有 标题 ， 货 品 清单 上 的 条 
目 也 是 内 容 (但 它 是 以 条 目 序 列 的 形式 出 现 的 ) 。WPF 的 UI 元 素 也 是 


这 样 ， 它 们 有 着 不 拘 一 格 的 内 容 以 便 程 序 员 根据 要 表达 的 数据 从 中 选 


择 。 


所 谓 物 以 类 聚 ， 根 据 是 否 可 以 装载 内 容 、 能 够 装载 什么 样 的 内 容 ， 
WPF 的 UI 元 素 可 以 分 为 如 表 5-1 所 示 的 这 些 类 型 。 


表 5-1 WPF 的 UI 元 素 的 类 型 


名 称 注释 
ContentControl 单一 内 容 控件 
HeaderedContentControl 带 标 题 的 单一 内 容 控 件 
[temsControl 以 条 目 集合 为 内 容 的 控件 
HeaderedltemsControl 带 标题 的 以 条 目 集合 为 内 容 的 控件 
Decorator 控件 装饰 元 素 
Panel 面板 类 元 素 
Adomer 文字 点 级 元 素 
Flow Text 流 式 文本 元 素 
TextBox 文本 输入 杠 
TextBlock 静态 文字 
Shape 图 形 元 素 


下 面 我 们 逐一 谢 析 这 些 元 素 的 内 部 结构 ， 了 解 内 容 与 内 容 属性 。 


你 可 以 把 控件 想象 成 一 个 容器 ， 容 器 里 装 的 东西 就 是 它 的 内 容 。 控 件 
的 内 容 可 以 直接 是 数据 ， 也 可 以 是 控件 。 当 控件 的 内 容 还 是 控件 的 时 
候 就 形成 了 控件 的 骸 套 。 我 们 把 被 般 套 的 控件 称 为 子 级 控件 ， 这 种 控 
件 藤 套 在 UI 布 局 时 尤为 常见 。 因 为 允许 控件 舱 套 ， 所 以 WPF 的 UI 会 形 
成 一 个 树 形 结构 。 如 果 不 考虑 控件 内 部 的 组 成 结构 ， 只 观察 由 控件 组 
成 的 “ 树 ”"， 那 么 这 棵 树 称 为 逻辑 树 (Logical Tre) ; WPF 控 件 往往 是 
由 更 基本 的 控件 构成 的 ， 即 控件 本 身 就 是 一 棵 树 ， 如 果 连 控件 本 身 的 
2 则 这 棵 比 逻辑 树 更 “ 繁 芒 ”的 树 称 为 可 视 元 素 树 (Visual 
Tree) ° 


控件 是 内 存 中 的 对 象 ， 控 件 的 内 容 也 是 内 存 中 的 对 象 。 控 件 通 过 自己 
的 某 个 属性 引用 着 作为 其 内 容 的 对 象 ， 这 个 属性 称 为 内 容 属 性 

(Content Property) 。“ 内 容 属性 ”是 个 统称 ， 具 体 到 每 种 控件 上 ， 内 容 
属性 都 有 目 己 确切 的 名 字 一 一 有 的 直接 束 叫 Content， 有 的 叫 Child; 有 
些 控件 的 内 容 可 以 是 集合 ， 其 内 容 属性 有 叫 Items 或 Children 的 。 


人 下 面 稍 做 
AE ° 
注意 


判断 一 种 编程 语言 精 恨 与 否 ， 很 重要 的 一 个 原则 就 是 程序 员 使 用 起 来 是 不 是 得 心 应 手 。XAML 
在 这 方面 做 的 很 好 ， 在 表达 上 元 素 和 元 素 内 容 时 的 语法 非常 灵活 ， 于 情 于 理 都 说 得 过 去 。 


所 谓 “ 于 理 ”， 职 是 说 我 们 严格 按照 语法 来 行事 。 探 件 不 是 有 内 容 属性 
吗 ? 那 在 XAML 里 我 们 就 应 该 能 够 使 用 Attribute=Value 或 者 属性 标签 的 
形式 来 为 内 容 赋 值 。 比 如 想 把 字符 串 "OK" 作 为 内 容 赋 值 给 一 个 
Button， 下 面 两 种 写法 都 是 正确 的 : 


«Button Content-" OK"/» 


或 者 : 


<Button> 
<Button,Content> 
«sys:String* OK «/sys:String» 
</Button.Content> 


</Button> 


MA TB", EUR nE o ERR KI RE — UC BROR 
行事 。 控 件 对 应 到 XAML 文 档 里 就 是 标签 ， 按 照 大 家 对 标签 语 言 的 理 
解 ， 控 件 的 内 容 束 应 该 是 标签 的 内 容 、 了 于 级 控件 束 应 该 古 标 签 的 子 级 
元 素 (简称 标签 的 元 素 ) 。 标 签 的 内 容 是 夹 在 起 始 标签 和 结束 标签 间 
的 代码 ， 因 此 ， 上 面 的 代码 也 可 以 写成 这 样 : 


«Button» 
<sys:String>OK</sys:String> 


</Button> 


换 句 话说 ，XAML 标 等 的 内 容 区 域 专门 映射 了 控件 的 内 容 属性 。 


有 些 控件 的 内 容 是 一 个 集合 ， 如 StackPanel 的 内 容 属 性 是 Children ^ 
ListBox 的 内 容 属性 是 Iems， 为 这 类 控件 添加 内 容 时 一 样 可 以 省 略 内 容 
属性 的 标签 。 以 StackPanel 为 例 ， 当 为 一 个 StackPanel 添 加 三 个 TextBox 
和 一 个 Button 时 ， 完 整 的 语法 应 该 是 这 样 : 


«StackPanel Background-" Gray" 
«StackPanel.Children 
«TextBox Margin-"5"/» 
«TextBox Margin-"5"/» 
«Button Content-"OK" Margin-"5"/» 
«/StackPanel.Children 


</StackPanel> 
人 简化 后 的 代码 是 : 


<StackPanel Background="Gray"> 
<TextBox Margin="5"/> 
<TextBox Margin-"5"/» 
«Button Content="OK" Margin-"5"/» 
</StackPanel> 


5.3 各 类 内 容 模型 详解 


我 们 把 符合 某 类 内 容 模型 的 UI 元 素 称 为 一 个 族 ， 每 个 族 用 它们 共同 基 
类 来 命名 。 


5.3.1 ”ContentControl 族 


本 族 元 素 的 特点 如 下 : 

e 均 派生 自 ContentControl 类 。 
e 它们 都 是 控件 (Control) ° 

e 内 容 属 性 的 名 称 为 Content 。 
e 只 能 由 单一 元 素 充当 其 内 容 。 


SEEN 由 单一 元 素 充 当 其 内 容 ” 这 人 句 话 呢 ? 让 我 们 看 一 个 例 


Button 控 件 属于 这 一 族 ， 所 以 ， 下 面 两 个 Button 的 代码 都 十 正确 的 
I 第 二 个 Button 的 内 容 是 一 张 图 


<StackPanel> 
«Button Margin-"5"» 
<TextBlock Text-"Hello"/» 
«Button» 
«Button Margin-"5"» 
«]mage Source-" 'smile.png" Width-"30" Height-"30"/» 
</Button> 


</StackPanel> 
但 如 果 你 想 让 Button 的 内 容 既 包含 文字 又 包含 图 片 是 不 行 的 : 


<StackPanel> 
«Button Margin="5"> 
<TextBlock Text="Hello"/> 
<Image Source-" ^smile.png" Width="30" Height-"30"/» 
</Button> 


</StackPanel> 


编译 器 报错 说 “The object 'Button' already has a child and cannot add 
'Image'. 'Button' can accept only one child”， 即 明确 地 告诉 我 们 一 一 
Button 只 能 接受 一 个 元 素 作 为 它 的 Content ° 


可 是 如 果真 的 需要 一 个 带 图 标的 Button 我 们 应 该 怎么 办 呢 ? Bes p, $E 
件 的 内 容 也 可 以 是 控件 ， 我 们 只 需要 先 用 一 个 可 以 包含 多 个 元 素 的 布 
局 控件 把 图 片 和 文字 包装 起 来 ， 再 把 这 个 布局 控件 作为 Button 的 内 容 就 
好 了 (布局 控件 详 见 5.3.8 节 Panel 族 ) 。 


ContentControl 族 包含 的 控件 如 表 5-2 所 示 。 
表 5-2 ”ContentControl 族 包含 的 控件 


Button ComboBoxltem 
ContentControl GridViewColumnHeader Groupltem 

Label NavigationWindow 
RadioButton StatusBarltem 
ToggleButton Window 


5.3.2 HeaderedContentControl]E 
本 族 元 素 的 特点 如 下 : 


e 它们 都 派生 自 HeaderedContentControl 类 ，HeaderedContentControl 是 
ContentControl 类 的 派生 类 。 


e 它们 都 十 控件 ， 用 于 显示 市 标题 的 数据 。 


e 除了 用 于 显示 主体 内 容 的 区 域外 ， 控 件 还 具有 一 个 显示 标题 
(Header) 的 区 域 。 


e 内 容 必 性 为 Content 和 Header ° 
e 无 论 是 Contenti 不 是 Header 都 只 能 容纳 一 个 元 素 作 为 其 内 容 。 


HeaderedContentControl 族 包含 的 控件 如 表 5-3 所 示 。 


表 5-3 ”HeaderedContentControl 族 包含 的 控件 


Expander HeaderedContentControl Tabltem 


下 面 这 个 例子 是 一 个 以 图 标 为 Header、 以 文字 为 主体 内 容 的 
GroupBox， 效 采 如 图 5-2 所 示 。 


«Grid» 
«GroupBox Margin-" 10" BorderBrush-" Gray" 
«OGroupBox.Header? 
«]mage Source" ^smile.png" Width-"20" Height-"20"/» 
«/GroupBox. Header? 
<TextBlock TextWrapping-" WrapWithOverflow" Margin-" 10" 
Text=" 一 棵 树 、 一 匹 马 、 一 头 大 象 和 一 只 鸡 在 一 起 ， 打 一 种 日 常用 品 ，" 户 
</GroupBox> 
</Grid> 


E” Smile Window 


一 棵 树 、 一 匹 马 、 一 头 大 象 和 一 只 鸡 在 
一 起 ， 打 一 种 日 常用 品 . 


图 5-2 ”GroupBox 控 件 示 例 效 果 
5.3.3 ”ItemsControl 族 

本 族 元 素 的 特点 如 下 : 

e 均 派 生 自 ItemsControl 类 。 


e 它们 都 是 控件 ， 用 于 显示 列表 化 的 数据 。 
e 内 容 属性 为 Items 或 ItemsSource。 
e 每 种 ItemsControl 都 对 应 有 上 自己 的 条 目 容器 (Irem Container) ° 
本 族 的 包含 的 控件 如 表 5-4 所 示 。 
表 5-4 ItemsControl 族 所 包含 的 控件 


Menu ComboBox 
ItemsControl TabControl 
TreeView 

注意 


本 族 控 件 最 有 特色 的 一 -点 就 是 会 自动 使 用 条 目 容 器 对 提交 给 它 的 内 容 进行 包装 。 合 法 的 
ItemsControl 内 容 一 定 是 个 集合 ， 当 我 们 把 这 个 集合 作为 内 容 提 交 给 ItemsControl 时 , 
ItemsControl 不 会 把 这 个 集合 直 接 拿 来  ， 而 是 使 用 自己 对 应 的 条 目 容器 把 集合 中 的 条 目 逐 个 

包装 ， 然 后 再 把 包装 好 的 条 目 序 列 当 作 自 己 的 内 容 。 这 种 自动 包装 的 好 处 就 是 允许 程序 员 握 向 
ItemsControl 提 交 各 种 数据 > 的 集合 ， 程 序 员 在 思考 问题 时 会 自然 而 然 地 感觉 到 ItemsControl 
控件 直接 装载 着 数据 ， 如 果 需 要 进行 增加 、 删 除 、 更 新 或 者 排序 ， 那 么 直接 去 操作 数据 集合 就 
可 以 ，UI 会 自动 将 改变 展现 出 来 。 这 正体 现 了 在 WPF 开 发 时 是 数据 直接 驱动 UI 再 进行 显示 。 


TIT 


ListBox z& ^ H 7 HJ ItemsControl , 下面 将 以 它 为 例 ， 人 研究 一 下 
ItemsControl ° 


首先 ， 我 们 看 看 ListBox 的 自动 包装 。WPF 的 ListBox 在 显示 功能 上 比 
Windows Form 或 者 ASP. i 传统 的 ListBox 只 能 
将 条 目 以 字符 串 的 形式 显示 ， 而 WPF 的 ListBox 除 了 可 以 显示 中 规 中 和 矩 
的 字符 串 条 目 还 能 够 显示 更 多 的 元 素 ， 如 CheckBox、RadioButton、 
Drm 这 样 一 来 ， 我 们 束 能 制作 出 更 加 丰富 的 UI。 例 如 下 面 这 上 段 


«Grid» 
«ListBox Margin-"5"» 
<CheckBox x:Name-"checkBoxTim" Content-"Tim"/» 
«CheckBox x:Name-"checkBoxTom" Content-"Tom"/» 
«CheckBox x:Name-"checkBoxBruce" Content-"Bruce"/» 
«Button x: Name-"buttonMess" Content-" Mess"/» 
«Button x:Name7"buttonOwen" Content-"Owen"/» 
«Button x:Name-"buttonVictor" Content-" Victor"/» 
</ListBox> 
</Grid> 


运行 效果 如 图 5-3 所 示 。 


图 5-3 ”ListBox 控 件 运行 效果 


表面 看 上 去 是 ListBox 直 接 包含 了 一 些 CheckBox 和 Button， 实 际 上 并 非 
我 们 为 Victor 这 个 按钮 添加 Click 事 件 的 响应 ， 看 看 它 的 父 级 容器 
是 什么 。 


XAML: 
«Button x:Name-"buttonVictor" Content-" Victor" Click-"buttonVictor Click"/» 
CH 
private void buttonVictor Click(object sender, RoutedEventArgs e) 
| 
Button btn = sender as Button; 
DependencyObject level! = VisualTreeHelper.GetParent(btn); 
DependencyObject level2 = VisualTreeHelper.GetParent(levell ); 
DependencyObject level3 = VisualTreeHelper.GetParent(level2); 
MessageBox. Show(level3.GetType().ToString()); 


单 击 按钮 后 ， 弹 出 消息 框 如 图 5-4 所 示 。 


System.Windows.Controls.ListBoxltem 


图 5-4 ”Button 控 件 的 父 级 容器 


前 面 我 们 已 经 知道 ，WPF 的 UI 是 树 形 结 构 ，VisualTreeHelper 类 就 是 帮 
助 我 们 在 这 棵 由 可 视 化 元 素 构成 的 树 上 进行 导航 的 辅助 类 。 我 们 沿 着 
和 被单 击 的 Button 一 层 一 层 同 上 找 ， 找 到 第 三 层 发 现 它 是 一 个 
ListBoxItem ° ListBoxItem 就 是 ListBox 对 应 的 Item Container, tE Wi Æ 
说 ， 无 论 你 把 什么 样 的 数据 集合 交 给 ListBox， 它 都 会 以 这 种 方式 进行 
目 动 包装 。 上 所 以 我 们 完全 没 必要 这 样 写 : 


«Grid» 
«ListBox Margin-"5"» 
«ListBoxltem» 
«Button x:Name-"buttonMess" Content-" Mess"/» 
«[ListBoxItem» 
<ListBoxltem> 
«Button x:Name="buttonOwen" Content-"Owen"/» 
«[ListBoxItem» 
«ListBoxltem 
«Button x:Name-"buttonVictor" Content-" Victor" Click-"buttonVictor Click"/» 
«[ListBoxItem? 
«[ListBox? 


</Grid> 


上 面 这 个 例子 是 单纯 地 为 了 说 明 ItemsControl 能 够 使 用 对 应 的 Item 
Container 自 动 包装 数据 。 实 际 工作 中 ， 除 非 列 表 里 的 元 素 目 始 至 终 都 
是 固定 的 我 们 才 使 用 这 种 直接 把 UI 元 素 作 为 emsControl 内 容 的 方法 ， 
比如 一 年 有 十 二 个 月 、 一 周 有 七 天 等 。 大 多 数 情况 下 ，UI 上 的 列表 会 
用 于 显示 动态 的 后 台数 据 ， 这 时 候 我 们 交 给 ItemsControl 的 就 是 程序 逻 
辑 中 的 数据 而 非 控 件 了 。 


假设 程序 中 定义 有 Employee 类 : 


public class Employee 

| 
public int Id { get; set; } 
public string Name | get; set; } 
public int Age { get; set; } 


/ 
Il T 


并 且 有 一 个 Employee 类 型 的 集合 : 


List<Employee> empList = new List<Employee>() 

| 
new Employee(){Id=1, Name="Tim", Age=30}, 
new Employee(){ld=2, Name="Tom", Age-26j, 
new Employee() Id-3, Name="Guo", Age-26j, 
new Employee) Id74, Name-" Yan", Age725], 
new Employee() Id-5, Name-"Owen", Age-30], 
new Employee(){1d=6, Name" Victor", Age-30], 


a 为 listBoxEmplyee 的 ListBox。 我 们 只 需要 这 
yu 


ll 

this.listBoxEmplyee.DisplayMemberPath = "Name"; 
this.listBoxEmplyee.SelectedValuePath = "Id"; 
this.lis:BoxEmplyee.ItemsSource = empList; 

Il ... 


程序 就 会 显示 出 如 图 5-5 所 示 的 结 


E` Window1l 


图 5-5 ”动态 后 台数 据 显示 示例 


DisplayMemberPath 这 个 属性 告诉 ListBox 显 示 每 条 数据 的 哪个 属性 ， 换 
人 句 话 说 ，ListBox 会 去 调用 这 个 属性 值 的 ToString() 方 法 ， 把 得 到 的 字符 
串 放 入 一 个 TextBlock (最 简单 的 文本 控件 ) ， 然 后 再 按 前 面 说 的 办 法 
TE TextBlock JE — 1 ListBoxItem E ° 


ListBox 有 的 SelectedValuePath 属 性 将 与 其 SelectedValue 属 性 配合 使 用 。 当 
你 调用 SelectedValue 属 性 时 ，ListBox 先 找到 选中 的 Item 所 对 应 的 数据 对 
m E T E 值 当 作 数 据 对 象 的 属性 名 称 并 把 这 个 属 
) 人 YHH o 


DisplayMemberPath 和 SelectedValuePath z& Wj A +4 24 f8j 4 BJ E TE 9 
DisplayMemberPath 只 能 显示 简单 的 字符 串 ， 想 用 更 加 复杂 的 形式 显示 
数据 需要 使 用 DataTemplate ， 我 们 在 后 面 的 章节 详细 讨论 ; 
SelectedValuePath 也 只 能 返回 单一 鸭 值 ， 如 采 想 进行 一 些 复杂 的 操作 ， 
不 妨 直 接 使 用 ListBox 的 SelectedItem 和 SelectedItems 属 性， 这 两 个 属性 
E CURAS 得 到 原始 的 数据 对 象 后 就 任 由 程序 员 
SE o 


理解 了 ListBox 的 目 动 包装 机 制 之 后 ， 我 把 全 部 ItemsControl 对 应 的 Item 
Container 列 在 下 面 ， 如 表 5-5 所 示 。 


表 5-5 ItemsControl 对 应 的 Item Container 


ItemsControl 名 称 对 应 的 Item container 
ComboBox ComboBoxltem 
ContextMenu Menultem 
ListBox ListBoxltem 
ListView ListViewltem 
Menu Menultem 
StatusBar StatusBarltem 
TabControl Tabltem 
TreeView TreeViewltem 


5.3.4 HeaderedItemsControl 族 


顾名思义 ， 本 族 控件 除了 具有 ItemsControl 的 特性 外 ， 还 具 显 示 标 题 的 
能 力 。 


本 族 元 素 的 特点 如 下 : 

e 均 派生 自 HeaderedItemsControl 类 。 

e 它们 都 是 控件 ， 用 于 显示 列表 化 的 数据 ， 同 时 可 以 显示 一 个 标题 。 
e 内 容 属 性 为 Items 、ItemsSource 和 Header ° 

因为 与 TemsControl 非 常 类 似 ， 在 此 束 不 浪费 笔 时 了 。 本 族 控 件 只 有 3 


^^: Menultem ` TreeViewItem ` ToolBar ° 


5.3.5 ”Decorator 族 

本 族 中 的 元 素 是 在 UI 上 起 装饰 效果 的 。 如 可 以 使 用 Border 元 素 为 一 些 组 
织 在 一 起 的 内 容 加 个 边框 。 如 果 需 要 组 织 在 一 起 的 内 容 能 够 目 由 绑 
放 ， 则 可 使 用 ViewBox 元 素 。 

本 族 元 素 的 特点 如 下 : 

e 均 派 生 目 Decorator 类 。 

e 起 UI 装饰 作用 。 

。 内 容 属 性 为 Child ° 

e 只 能 由 单一 元 素 充 当 内 容 。 


本 族 元 素 如 表 5-6 所 示 。 
表 5-6 ”Decorator 族 元 素 
ButtonChrome ClassicBorderDecorator ListBoxChrome SystemDropShadowChrome 
Border InkPresenter BulletDecorator Viewbox 


AdornerDecorator 


5.3.6 TextBlock 和 TextBox 

这 两 个 控件 最 主要 的 功能 是 显示 文本 。TextBlock 只 能 显示 文本 ， 不 能 
编辑 ， 所 以 又 称 静 态 文 本 。TextBox 则 人 允许 用 户 编辑 其 中 的 内 容 。 
TextBlock 虽 然 不 能 编辑 内 容 ， 但 可 以 使 用 丰富 的 印刷 级 的 格式 控制 标 
记 显 示 专 业 的 排版 效果 。 


TextBox 不 需要 太 多 的 格式 显示 ， 所 以 它 的 内 容 是 简单 的 字符 串 ， 内 容 
属性 为 Text 。 


TextBlock 由 于 需要 操纵 格式 ， 所 以 内 容 属 性 是 Inlines (印刷 中 
HJIT) ， 同 时 ，TextBlock 也 保留 一 个 名 为 Text 的 属性 ， 当 简单 地 显示 
一 个 字符 串 时 ， 可 以 使 用 这 个 属性 。 

5.3.7 ”Shape 族 元 素 

友好 的 用 户 界 面 离 不 开 各 种 图 形 的 搭配 ，Shape 族 元 素 (它们 只 是 简单 
的 视觉 元 素 ， 不 是 控件 ) 就 是 专门 用 来 在 UI 上 绘制 图 形 的 一 类 元 素 。 
这 类 元 素 没 有 目 己 的 内 容 ， 我 们 可 以 使 用 F 记 属性 为 它们 设置 填充 效 
果 ， 还 可 以 使 用 Stroke 属 性 为 它们 设置 边线 的 效果 。 

本 族 元 素 的 特点 如 下 : 

e 均 派 生 目 Shape 类 。 

e 用 于 2D 图 形 绘制 。 

e 无 内 容 属 性 。 

e 使 用 Fill 属 性 设置 填充 ， 使 用 Stroke 属 性 设置 边线 。 

5.3.8 Paned nt% 

之 所 以 把 Panel 族 元 素 放 在 最 后 是 因为 这 一 族 探 件 实在 是 太 重 要 了 一 -一 
所 有 用 于 UI 布 局 的 元 素 都 属于 这 一 族 。 我 们 将 在 本 章 的 后 半 部 分 仔细 
人 研习 数 个 重要 的 布局 元 丸 。 


本 族 元 素 的 特点 如 下 : 


e 均 派 生 自 Panel 抽 象 类 。 

e 主要 功能 是 控制 UI 布 局 。 

e 内 容 属 性 为 Children ° 

e 内 容 可 以 是 多 个 元 素 ，Panel 元 素 将 控制 它们 的 布局 。 

XT FE ItemsControl FH Panel CTR, R& £A LE AB AUEL, fH 
ItemsControl 强 调 以 列表 的 形式 来 展现 数据 而 Panel 则 强调 对 包含 的 元 素 
进行 布局 ， 所 以 ItemsControl 的 内 容 属 性 是 Items 和 ItemsSource 而 Panel 的 


内 SCR 为 Children。WPF 框 架 中 这 种 民 好 的 命名 习惯 非常 值得 我 们 
AED o 


本 族 元 素 如 表 5-7 所 示 。 
35-7 Panel 族 元 素 
Canvas DockPanel Grid TabPanel 
ToolBarOverflowPanel StackPanel ToolBarPanel UniformGrid 
VirtualizingPanel VirtualizingStackPanel WrapPanel 


接 下 来 的 5.4 节 将 逐个 研究 这 些 布局 元 素 。 
5.4 UI 布局 (Layout) 


WPF 作 为 专门 的 用 户 界 面 技术 ， 布 局 功能 是 它 的 核心 功能 之 一 。 友 好 
的 用 户 界面 和 民 好 的 用 户 体验 离 不 开设 计 精 民 的 布局 。 日 常 工 作 中 ， 

WPF 设 计 师 工作 量 最 大 的 两 部 分 就 是 布局 和 动画 ， 除 了 点 组 性 的 动画 
外 ， 大 部 分 动画 也 是 布局 间 的 转换 ，UI 布 局 的 重要 性 可 见 一 班 。 布 局 
年 静态 的 ， 动 画 是 动态 的 ， 用 户 体 狼 殉 征用 户 在 这 动 藤 之 中 与 软件 蕊 
能 产生 交互 时 的 感受 。 


注意 


WPF 的 布 同居 依靠 各 种 布 局 元 素 实 现 的 。 布 局 元 素 既 有 像 传统 的 Windows Form 和 
ASPNET 那 样 使 用 绝对 坐标 进行 定位 的 元 素 ， 也 有 像 HTML 页面 中 那样 使 用 行列 定位 的 元 素 。 
人 5 局 元 素 了 如 指 掌 才能 使 最 简洁 的 XAML 和 C# 代 码 实现 让 用 户 赏心悦目 的 静态 界 
HAISE o 


在 开始 学 习 这 些 布局 元 素 前 ， 首 先 提 醒 大 家 一 句 : BET TB RITU DH 
目 己 的 特 总 ， 即 有 目 己 的 优点 、 长处， 也 有 目 己 的 缺点 和 短处 。 大 家 
一 定 有 要 把 每 个 元 素 的 特点 记 清 和 芭 并 灵活 使 用 ， 切 莫 对 每 种 布局 控件 都 
无 所 不 用 其 极 。 选 择 合 适 的 布局 元 素 ， 将 会 极 大 地 简化 编程 ， 反 之 将 
会 被 迫 实现 一 些 布局 控件 原本 已 有 的 功能 。 男 外 ， 设 计 静 态 布 局 的 时 
候 也 不 能 一 味 地 追求 简单 ， 如 琳 各 静态 布局 间 还 有 动画 作为 联系 ， 正 
还 需要 考虑 与 动画 设计 的 兼容 性 。 


5.4.1 布局 元 素 


传统 的 Windows Form 或 ASP.NET 开 发 中 ， 一 般 是 把 窗 体 或 页 面 当 作 一 
个 以 左上 和 角 为 原点 的 坐标 系 。 窗 体 或 页 面 上 的 控件 依靠 这 个 坐标 系 来 
布局 ， 布 局 的 办 法 就 是 调整 控件 在 这 个 坐标 系 中 的 横 纵 坐标 值 。 这 样 
一 来 ， 控 件 与 控件 之 间 的 关系 要 么 就 是 相 邻 要 么 就 是 闭 压 。 


WPF 的 控件 有 了 Content 的 概念 ， 所 以 控件 与 控件 之 间 又 多 出 一 种 关系 
包含 。 也 正 是 这 种 以 窗 体 为 根 的 包含 关系， 整个 WPF 的 UI 才 形 成 
树 形 结构 ， 我 们 称 之 为 可 视 化 树 (VisualTree) ， 如 图 5-6 所 示 。 


图 5-6 ”可 视 化 树 


这 是 几 个 扬 在 一 起 的 Button。 当 看 到 这 张 图 时 ，Windows Form 程 序 员 
会 想到 把 几 个 Button 琶 加 在 一 起 ， 而 WPF 程 序 员 除了 可 以 使 用 与 
Windows Form 程 序 员 一 样 的 办 法 外 还 多 了 一 个 选择 一 一 把 一 个 Button 
作为 男 一 个 Button 的 Content。 代 人 码 如 下 : 


«Grid» 
«Button Margin-"10"» 
«Button Margin-" 10" 
«Button Margin-"10"» 
«Button Margin-"10"» 
«Button Margin-" 10" Content-"OK"/» 
</Button> 
</Button> 
</Button> 
</Button> 
</Grid> 


但 WPF 程 序 员 会 遇 到 这 样 一 个 问题 : 用 于 构成 UI 的 重要 控件 ， 如 
Window ` UserControl ^ GroupBox ^ Button ^ Label 等， 都 集中 在 
ContentControl 和 HeaderedContentControl 族 里 ， 但 这 了 两 族 控 件 只 能 接受 
一 个 元 素 作 为 自己 的 Content， 如 果 想 在 这 些 控件 里 包含 多 个 控件 应 该 
怎么 做 昵 ? 这 束 要 用 到 布局 元 素 了 。 布 局 元 素 属 于 Panel 族 ， 这 一 族 元 
素 的 内 容 属性 是 Children， 即 可 以 接受 多 个 控件 作为 目 己 的 内 容 并 对 这 
些 探 件 进行 布局 控制 。WPF 的 布局 理念 聊 是 把 一 个 布局 元 素 作 为 
ContentControl 或 HeaderedContentControl 族 控件 的 Content， 再 在 布局 元 
素 里 添加 要 被 布局 的 子 级 控件 ， 如 果 UI 局 部 需要 更 复杂 的 布局 ， 那 就 
在 这 个 区 域 放 置 一 个 子 级 的 布局 元 素 ， 形 成 布局 元 素 的 藤 套 。 


WPF 中 的 布局 元 素 有 如 下 几 个 : 


e Grid: 网 格 。 可 以 上 自 定义 行 和 列 并 通过 行列 的 数量 、 行 高 和 列 宽 来 
调整 控件 的 布局 。 近 似 于 HTML 中 的 Table 。 


e StackPanel: 栈 式 面板 。 可 将 包含 的 元 素 在 坚 直 或 水 平方 向上 排 成 
poe 当 移 除 一 个 元 素 后 ， 后 面 的 元 素 会 目 动 同 前 移动 以 填充 空 


e Canvas: 画布 。 内 部 元 素 可 以 使 用 以 像素 为 单位 的 绝对 坐标 进行 定 
位 ， 类 似 于 Windows Form 编 程 的 布局 方式 。 


e DockPanel: BAHI e AERA ARRET, RUTE 
Windows Form 编 程 中 设置 控件 的 Dock 属 性 。 


e  WrapPanel: 目 动 折 行 面板 。 内 部 元 素 在 排 满 一 行 后 能 够 和 目 动 折 
行 ， 类 似 于 HTML 中 的 流 式 布局 。 


下 面 我 们 可 逐个 研究 一 下 它们 的 使 用 方法 。 
5.4.2 Grid 


顾名思义 ，Grid 元 素 会 以 网 格 的 形式 对 内 容 元 素 们 CRI RS Children) 
进行 布局 * 


Grid 的 特点 如 下 : 
e 可 以 定义 任意 数量 的 行 和 列 ， 非 常 灵 活 。 


e 行 的 高 度 和 列 的 宽度 可 以 使 用 绝对 数值 、 相 对 比例 或 自动 调整 的 方 
式 进 行 精 确 设 定 ， 并 可 设置 最 大 和 最 小 值 。 


e 内 部 元 素 可 以 设置 目 己 的 所 在 的 行 和 列 ， 还 可 以 设置 目 己 纵 同 路 几 
ÍT ` RHS JLA] ° 


e 可 以 设置 Children 元 素 的 对 齐 方向 。 

基于 这 些 特点 ，Grid 适 用 的 场合 有 : 

e UI 布局 的 大 框架 设计 。 

e 大 量 UI 元 素 需 要 成 行 或 者 成 列 对 齐 的 情况 。 

e UI 整体 尺寸 改变 时 ， 元 素 需 要 保持 固有 的 高 度 和 宽度 比例 。 
e UI 后 期 可 能 有 较 大 变更 或 扩展 。 

1. 定义 Grid 的 行 与 列 


Grid 类 具有 ColumnDefinitions 和 和 RowDefinitions 两 个 属性 ， 它 们 分 别 
ColumnDefinition 和 RowDefinition 的 集合 ， 示 Grid 定 义 了 多 少 列 、 


少 行 。 例 如 下 面 的 代码 : 


H 
AE 
多 


«Grid» 
«Grid.ColumnDefinitions? 
«ColumnDefinition/^ 
«ColumnDefinition/^ 
«ColumnDefinition/» 
«ColumnDefinition/» 
«JGrid.ColumnDefinitions» 
«Grid.RowDefinitions* 
«RowDefinition/ 
«RowDefinition/» 
«RowDefinition/» 
</Grid.RowDefinitions> 
</Grid> 


它 的 功能 是 将 Gird 定 义 为 4 列 3 行 ， 在 窗 体 设计 器 里 你 能 看 到 这 样 的 设计 
预览 ， 如 图 5-7 所 示 。 


Dr 


图 5-7 ”Grid 元 素 示 例 


Visual Studio 为 我 们 准备 了 非常 实用 的 XAML 设 计 器 ， 当 你 把 鼠标 指针 
在 Grid 的 边缘 上 移动 时 会 出 现 一 条 提示 线 ， 一 旦 你 单 击 鼠 标 则 会 在 此 应 
加 一 条 分 隔 线 、 创 建 出 新 的 行 和 列 。 在 实际 工作 中 ， 我 们 可 以 先 在 
XAML 设 计 器 里 粗略 地 划分 好 行 和 列 然后 回 到 XAML 编 辑 器 里 通过 修 
改 代码 进行 精确 调整 。 


如 果 需 要 动态 地 调整 Grid 的 布局 ， 可 以 在 C# 完 成 对 列 和 行 的 定义 。 假 
设 窗 体 包含 一 个 名 为 gridMain 的 Grid 元 素 ， 我 为 这 个 窗 体 的 Loaded 事 件 
准备 了 如 下 的 处 理 虱 : 


private void Window Loaded(object sender, RoutedEventArgs e) 

| 
// Add 4 columns 
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition()); 
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition()J; 
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition()); 
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition()J; 


// Add 3 rows 

this.gridMain.RowDefinitions.Add(new RowDefinition()); 
this.gridMain.RowDefinitions.Add(new RowDefinition()); 
this.gridMain.RowDefinitions.Add(new RowDefinition()); 


// Show grid line in runtime 
this.gridMain.ShowGridLines = true; 


则 程序 运行 后 显示 的 效果 如 图 5-8 所 示 。 
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图 5-8 ”动态 调整 Grid 布局 示例 


只 定义 行 和 列 的 个 数 还 远 远 不 够 ， 我 们 还 需要 设置 行 的 高 度 和 列 的 帘 
度 才 能 形成 有 意义 的 布局 。 这 束 引 出 两 个 问题 : 

e 视 度 和 高 度 的 单位 是 什么 。 

o 宽度 和 高 度 可 以 取 什么 样 的 值 。 

先 来 回答 第 一 个 问题 。 计 算 机 图 形 设 计 的 标准 单位 是 像素 (Pixel) ， 
所 以 Grid 的 宽度 和 高 度 单位 束 是 像素 。 除 了 可 以 使 用 像素 作为 单位 外 ， 


Grid 还 接受 英寸 (Inch) `Æ (Centimeter) 和 点 (Point) 作为 单 
位 ， 这 些 单位 如 表 5-8 所 示 。 


表 5-8 ”Grid 可 接受 的 宽度 和 高 度 的 单位 


英文 名 和 E m 
Pixel px (默认 单位 ， 可 和 省略) 图 形 基本 单位 
Inch in linch=96pixel 
Centimeter cm 1cm=(96/2.54)pixel 
Point 点 pt [pt-(96/72)pixel 


用 一 段 代码 把 所 有 单位 都 展示 出 来 : 


«Grid» 

«Grid. RowDefinitions? 
<RowDefinition Height" 30px"/» 
<RowDefinition Height-"30"/» 
<RowDefinition Height-"0.5in"/ 
<RowDefinition Height-"lcm"/» 
<RowDefinition Height-"30pt"/» 

«JGrid.RowDefinitions? 


«Gnd» 


它 的 设计 预览 如 图 5-9 所 示 。 


图 5-9 不同 的 长 度 单位 


注意 
上 面 这 段 代 码 有 几 点 值得 注意 的 地 方 : 


e 属性 的 值 为 double 类 型 。 


e 因为 像素 是 默认 单位 ， 所 以 px 可 以 省 略 。 


e 其 他 单位 也 会 被 转换 成 像素 并 显示 在 Grid 的 边缘 处 。 


实际 工作 中 使 用 什么 单位 要 看 程序 具体 的 功能 ， 如 果 UI 只 用 于 显示 在 
计算 机 屏幕 上 ， 那 么 像素 单位 最 为 合适 ， 如 采 程 序 涉及 打印 输出 ， 则 
公制 单位 选择 厘米 、 英 制 单 位 使 用 英寸 比较 合适 。 


e Piin S 。 对 于 Grid 的 行 高 和 列 宽 ， 我 们 可 以 设置 三 类 


e 绝对 值 ，double 数 值 加 单位 后 级 (如 上 例 ) 。 
e 比例 值 : double 数 值 后 加 一 个 星 号 (“*”) 。 


e HEB: FIFE Auto ° 


前 面 的 例子 我 们 使 用 的 就 是 绝对 值 。 绝 对 值 的 特点 是 一 经 设 定 束 不 会 
再 改变 ， 所 以 又 称 固定 值 。 当 控件 的 宽度 和 高 度 不 需要 改变 或 者 使 用 
空 行 、 空 列 作为 控件 间隔 时 ， 绝 对 值 是 不 二 之 选 。 


比例 值 是 在 double 类 型 数据 后 加 一 个 星 号 (“*”) 。 解 析 器 会 把 所 有 比 
例 值 的 数值 加 起 来 作为 分 母 、 把 每 个 比例 值 的 数值 作为 分 子 ， 再 用 这 
个 分 数值 乘 以 未 被 占用 空间 的 像素 数 ， 得 到 的 结果 就 是 分 配给 这 个 比 
例 值 的 最 终 像 素数 。 比 如 一 个 总 高 度 为 150px 的 Grid， 它 包含 5 行 ， 其 中 
两 行 采 用 绝对 值 25px， 其 他 三 行 分 别 是 2*、1*、2*， 使 用 上 面 的 计算 
方法 ， 这 三 行 分 配 的 像素 数 应 该 是 40pX、20px 和 40px。 


比例 值 最 大 的 特点 是 当 UI 的 整体 尺寸 改变 后 ， 它 会 保持 固有 的 比例 。 
如 下 面 这 段 代码 所 示 : 


«Grid ShowGridLines="True"> 
<Grid.RowDefinitions> 
<RowDefinition Height="25"/> 
<RowDefinition Height="4"/> 
<RowDefinition Height="1*"/> 
<RowDefinition Height="*"/> 
<RowDefinition/> 
</Grid.RowDefinitions> 
</Grid> 


程序 启动 时 你 看 到 的 UI 如 图 5-10 所 示 。 


图 5-10 程序 启动 时 显示 效果 
当 你 改变 窗 体 的 尺寸 后 ， 它 会 变 成 如 图 5-11 所 示 。 
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图 5-11 ”改变 窗 体 尺寸 后 的 显示 效果 


从 上 面 的 变化 中 我 们 可 以 看 出 ， 当 改变 容器 的 尺寸 时 ， 使 用 绝对 值 的 
行 高 不 会 改变 而 使 用 比例 值 的 行 高 会 保持 固有 比例 。 而 且 ， 行 高 和 列 
宽 的 默认 形式 就 是 比例 值 ， 所 以 如 果 没 有 显 式 指 定 行 高 或 列 宽 时 ， 默 
认 值 就 是 1*，1* 又 可 以 简写 为 * 。 

如 果 你 使 用 自动 值 (字符 串 “Auto”) 为 行 高 或 列 宽 赋值 ， 那 么 行 高 或 
列 宽 的 实际 值 将 由 行列 内 控件 的 高 度 和 宽度 决定 ， 通 俗 点 讲 就 是 控件 
会 把 行列 “ 撑 ” 到 合适 的 宽度 和 高 度 。 如 果 行 列 中 没有 控件 ， 则 行 高 和 
列 宽 均 为 0。 

接 下 来 让 我 们 看 看 如 何 使 用 这 三 种 值 为 Grid 定义 行列 和 布局 控件 。 


2. 使 用 Grid 进行 布局 


让 我 们 通过 一 个 实例 来 学 习 用 Grid 布 局 。 下 面 两 张 图 是 设计 师 交 给 程序 
员 的 UI 设计 图 ， 如 图 5-12 所 示 的 图 是 用 于 XAML 编 程 的 ， 如 图 5-13 和 图 
5-14 所 示 的 图 是 期 望 效 采 。 


请 选择 您 的 部 门 并 鱼 言 : 


根据 内 容 自动 调整 
240px 


图 5-12 ”用 于 XAML 编 程 的 UI 设计 图 


图 5-13 ”期 望 效 果 一 


图 5-14 期望 效果 二 


在 开始 使 用 Grid 实 现 上 面 的 设计 之 前 ， 我 先 说 一 个 初学 者 常见 的 错误 

-W H] Margin ° Margin bl E, F80 WIAR VU JS] ER A EA RS HI RR. 

。 很 多 从 Windows Form fll ASP.NET if 42 F! WPF BJ f Fr Five T iR 
Graz" ARNE 设 定 控件 高 度 、 宽 度 和 Margin 的 方式 进行 布局 。 对 于 
简单 的 布局 ，Height 十 Width 十 Margin 的 方式 尚 能 应 付 ， 但 对 于 结构 复 
杂 的 布局 这 种 方式 就 吃不消 了 。 人 代码 中 满 篇 都 是 对 Height、Width ^ 
Margin 以 及 对 并 广 癌 的 设置 ， 不 光 读 起 来 费劲 ， 而 且 有 时 一 个 小 小 改 
动 都 可 能 导致 大 量 的 代码 修改 (比如 为 了 保证 多 个 控件 在 行 或 列 上 的 
对 齐 以 及 膨 边 受 到 影响 的 控件 ) 甚至 导致 整个 UI 布局 的 骨 浇 ， 着 实 令 


拿 上 面 这 个 设计 来 说 ， 如 果 使 用 Height 十 Width 十 Margin 的 方式 来 设 
计 ， 代 码 会 是 这 样 : 


«Window x:Class-"WpfApplication2. Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title=" 留 言 板 " Height-"240" Width="400"> 
«Grid» 
<TextBlock Text=" 请 选择 您 的 部 门 并 留言 : "” Margin-" 10,10,0,0" Height-"25" Width-" 140" VerticalAlignment- 
"Top" HorizontalAlignment="Left" /> 
<ComboBox Height-"25" Width-"210" VerticalAlignment-"Top" Margin="0,10,10,0"  HorizontalAlignment- 
"Right"/» 
«TextBox BorderBrush-"Black" Margin" 10,40, 10,40" /> 
«Button Content-" ft 3 " Height-"25" Width-"80" VerticalAlignment-"Bottom" HorizontalAlignment-"Right" 
Margin-"0,0,96,10" /» 
«Button Content-" 消除 " ^ — Height-"25" Width-"80" HorizontalAlignment-"Right" Margin-"0,0,10,10" 
VerticalAlignment-" Bottom" /> 
«IGrid» 
«/Nindow» 


这 样 的 代码 ， 简 直 称 得 上 是 凌乱 不 堪 的 典范 ! 更 重要 的 是 ， 它 没 能 忠 
实地 重 现 设计 师 的 需求 一 一 要 求 静态 文本 的 宽度 由 内 容 决 定 。 这 就 意 
味 着 ， 如 果 有 一 天 这 个 程序 进行 国际 化 修改 时 ， 这 里 不 是 出 现 字符 串 
被 截断 就 是 留 下 大 量 空白 。 进 而 ， 如 果 设 计 师 要 求 把 控件 距离 窗 体 的 
距离 由 原来 的 10px 修 改 为 12px， 则 几乎 所 有 控件 的 Height、Width 和 
Margin 都 需要 修改 。 若 是 在 程序 员 完 成 修改 ， 设 计 师 感觉 还 是 10px 比 
较 好 、 要 求 再 改 回 去 ， 估 计 一 场 邮 件 大 战 在 所 难免 。 


正确 的 办 法 是 使 用 Grid 来 进行 布局 : 


«Window x:Class-"WpfApplicationl.Window]" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.mierosoft.com/winfx/2006/xaml" 
Title=" 留 言 板 " Height-"240" Width-"400"» 

«Grid Margin-" 10"» 

«Grid.ColumnDefinitions» 
«ColumnDefinition Width-" Auto" MinWidth-" 120" /> 
«ColumnDefinition Width-"*" /> 
«ColumnDefinition Width-"80" /> 
«ColumnDefinition Width-"4" /> 
«ColumnDefinition Width-"80" /> 

«/Grid.ColumnDefinitions» 

«Grid. RowDefinitions» 
<RowDefinition Height-"25" /» 
<RowDefinition Height-"4" /> 
<RowDefinition Height-"*" /> 
«RowDefinition Height-"4" /> 
<RowDefinition Height-"25" /> 

</Grid.RowDefinitions> 
«iGrid» 
</Window> 


这 个 布局 的 设计 预览 如 下 网 5-15 所 示 。 


图 5-15 ”用 Grid 的 行 、 列 来 布局 控件 


在 代码 中 ， 我 们 使 用 Width="Auto" 保 证 这 一 列 的 宽度 由 控件 的 最 大 宽度 
决定 ， 同 时 使 用 MinWidth="120" 保 证 这 一 列 最 罕 不 会 小 于 120px (目的 
是 在 设计 期 看 到 这 一 列 的 存在 ) 。 使 用 比例 值 的 行 和 列 确保 此 行 和 列 
中 的 控件 会 把 剩余 空间 充满 。 把 Grid 的 Margin 设 计 为 10， 意 味 着 它 四 周 
的 Margin 都 为 10px， 相 当 于 写 Margin="10,10,10,10" 一 Margin 的 4 个 值 
按 顺 时 针 代表 左 、 上 、 右 、 下 4 个 留 白 。 


最 后 ， 我 们 把 控件 填 进 去 ， 同 时 为 了 保证 布局 美观 ， 限 定 窗 体 的 高 度 
和 宽度 的 范围 : 


«Window x:Class-"WpfApplication] Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title=" 留 言 板 " Height-"240" Width="400" 

MinHeight="200" MinWidth="340" MaxHeight="400" MaxWidth="600"> 
«Grid Margin="10'> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="Auto"/> 
<ColumnDefinition Width="*" /> 
<ColumnDefinition Width="80" /> 
<ColumnDefinition Width="4" /> 
«ColumnDefinition Width="80" /> 
</Grid.ColumnDefinitions> 
<Grid.RowDefinitions> 
<RowDefinition Height="25" /> 
<RowDefinition Height="4" /> 
<RowDefinition Height="*" /> 
<RowDefinition Height="4" /> 
<RowDefinition Height="25" /> 
</Grid.RowDefinitions> 


<TextBlock Text=" 请 选择 您 的 部 门 并 留言 ，" Grid.Column="0" Grid. Row-"0" VerticalAlignment="Center"/> 
<ComboBox Grid.Column-"]" Grid.Row="0" Grid.ColumnSpan="4"/> 
<TextBox Grid.Column-"0" Grid.Row-"2" Grid.ColumnSpan-"5" BorderBrush="Black"/> 
«Button Content-" ^2" Grid.Column-"2" Grid.Row-"4"/» 
«Button Content=" 清 除 " Grid.Column-"4" Grid. Row-"4"/» 
«lorid» 
«Window» 


注意 
为 控件 指定 行 和 列 遵循 以 下 规则 : 
o 行 和 列 都 是 从 0 开始 计数 。 


e 指定 一 个 控件 在 茶 行 ， 就 为 这 个 控件 的 标签 添加 Grid.Row=' 行 编号 "这 样 一 个 Attribute， 寿 
行 编号 为 0 〈 即 控件 处 于 首 行 ) 则 可 省 略 这 个 Attribute 。 


e 指定 一 个 控件 在 某 列 ， 就 为 此 控件 添加 Grid.Column=" 列 编号 这 样 的 Attribute， 若 列 编 号 大 
0 则 Attribute 可 以 省 略 不 写 


e 若 控 件 需 要 跨 多 个 行 或 列 ， 请 使 用 Grid.RowSpan=" 行 数 " 和 Grid.ColumnSpan=" 列 数 "两 个 
Attribute ° 


你 可 能 会 问 ， 为 什么 给 控件 指定 行 和 列 要 使 用 Grid.Row 和 Grid.Column 
而 不 是 Button.Row 或 者 TextBox.Column 呢 ? 其实 这 个 问题 很 简单 。 假 使 
我 们 从 街 上 随便 拉 住 一 个 人 问 : RUE TE JUERUUHEMT "UT ACH XE 
43jE" mW: “我 又 没有 在 学 校 里 读书 ， 怎 么 可 能 有 年 级 和 班级 
UE? ”。 对 于 控件 也 是 这 样 ， 探 件 设计 出 来 的 时 候 并 没有 规定 它 一 定 要 
放 在 Grid 里 ， 所 以 不 可 能 为 它 准备 诸如 Row、Column、RowSpan 和 
ColumnSpan 这 类 的 属性 ， 只 有 当 它 被 放 到 Grid 里 时 说 它 位 于 哪 一 行 、 
哪 一 列 才 有 意义 的 ， 也 就 是 说 ， 这 些 属 性 不 是 控件 所 固有 的 而 是 被 Grid 
附加 上 的 。 这 类 依 控件 所 处 环境 而 被 容器 附加 上 的 属性 有 个 专门 的 名 
字 一 一 附加 属性 ， 我 们 将 在 后 面 的 章节 详细 讨论 。 在 明白 附加 属性 的 
原理 之 前 ， 学 会 使 用 它们 即 可 。 


注意 


(1) KUIRU ENER A 种 布 T 拿 上 面 这 个 例子 来 说 ， 我 们 完全 可 以 
使 用 一 个 Grid 把 整个 UI 分 为 上 、 中 、 下 三 部 分 ， 然 后 再 在 上 两 个 部 分 TAN FAX Grid, fH 
这 样 做 不 但 使 代码 量 增 大 ， 符 百 让 结构 变 得 更 加 复 杂 和 不 清晰 ， 影响 阅读 。 所 以 ， 评 价 一 个 
布局 的 优 劣 不 但 要 看 它 的 结构 是 否 合理 ， 还 要 考虑 与 代码 质量 的 平衡 性 。 


Mr 
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(2) 如 果 把 两 个 元 素 放 在 Grid 的 同一 个 单元 格 内 ， 则 代码 中 后 书写 的 元 素 将 盖 在 先 书写 的 元 
素 之 上 。 如 果 想 让 盖 在 后 面 的 元 素 显示 出 来 ， 可 以 把 上 面 元 素 的 Visibility 设 置 为 Hidden 或 
Collapsed， 也 可 以 把 上 面 元 素 的 Opacity 属 性 设置 为 0。 


5.4.3 StackPanel 


StackPanel 可 以 把 内 部 元 素 在 纵向 或 横向 上 紧 凌 排列 、 形 成 栈 式 布 局 ， 
通俗 地 讲 就 是 把 内 部 元 素 像 垒 积木 一 样 “ 据 起 来 ”。 垒 积木 大 家 都 玩 
过 ， 当 把 排 在 前 面 的 积木 块 抽 掉 之 后 排 在 它 后 面 的 元 际会 整体 辣 前 移 
动 、 补 占 原 有 元 到 的 空间 。 基 于 这 个 特点 ，StackPanel 适 合 的 场合 有 : 


e 同类 元 素 需 要 紧凑 排列 CADECESERREE EA) 。 
e 移 除 其 中 的 元 素 后 能 够 目 动 补 缺 的 布局 或 者 动画 。 


StackPanel 使 用 3 个 属性 来 控制 内 部 元 素 的 布局 ， 它 们 是 Orientation ` 
HorizontalAlignment 和 VerticalAlignment， 上 有 具体 如 表 5-9 所 示 。 


表 5-9 StackPanel 的 三 个 属性 
属性 名 各 数据 类 型 "m 


ientati "iientatian MD Horizontal 决定 内 部 元 素 是 横 问 累积 还 
Orientation Orientation 枚 举 pe 
Vertical 是 纵 问 累积 


Left 
. | Center 决定 内 部 元 素 水 平方 向 上 的 
HorizontalAlignment | HorizontalAlignment 枚 举 ii KETAR 
Right 对 齐 方式 


Stretch 


Top 


Center 决定 内 部 元 素 紧 直方 向 上 的 
Bottom 对 齐 方式 


VerticalAlignment VerticalAlignment 枚 举 


Stretch 


于 万 不 要 因为 StackPanel 的 功能 简单 就 冷落 它 ! 实际 上 它 有 着 很 多 不 可 
替代 的 优势 。 举 个 例子 : 如 果 我 需要 一 个 菜单 ， 这 个 菜单 里 的 每 个 条 
目 被 单 击 后 就 会 脱离 原来 的 位 置 并 在 主 显示 区 域 展 开 成 一 张 地 图 ， 其 
他 排 在 它 后 面 的 条 目 会 目 动 回 前 移动 、 补 占 原来 条 目的 位 置 ， 这 时 候 
了 束 应 该 选用 StackPanel。 因 为 StackPanel 会 上 自动 把 后 面 的 条 目 辐 前 移动 
而 无 需 我 们 目 己 动手 写 代 码 。 如 果 你 选用 了 Grid， 那 么 你 就 需要 写 一 个 
算法 把 后 面 的 条 目 回 前 移动 。 


下 面 这 个 例子 就 是 一 个 使 用 StackPanel 布 局 的 选项 表 ， 比 起 使 用 Grid 它 
要 简单 得 多 。 


«Window x:Class-"WpfApplication]. Window] " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title=" 选 择 题 " Height-" 190" Width="300"> 
«Grid» 
«GroupBox Header=" 请 选择 没有 错别字 的 成 语 " BorderBrush-"Black" Margin-"5"» 
«StackPanel Margin="5"> 
«CheckBox Content="A， 迫 不 急 待 "> 
«CheckBox Content-"B. 首 曲 一 指 "> 
«CheckBox Content="C， 陈 词 烂 调 "> 
«CheckBox Content-"D, RERA" > 
«CheckBox Content-"E, 不 可 礼 喻 "> 
<StackPanel Orientation-" Horizontal" HorizontalAlignment-"Right"» 
«Button Content-" ji 4" Width-"60" Margin-"5"/» 
«Button Content=" 确 定 " Width-" 60" Margin-"5"/» 
«JStackPanel» 
</StackPanel> 
</GroupBox> 
</Grid> 
</Window> 


运行 效果 如 图 5-16 所 示 。 


请 选择 没有 错别字 的 成 语 
[LA GET SS 
B. 首 曲 一 指 
T C. 陈 词 党 调 


D. BEYS, 
E) E. 不 可 礼 险 


图 5-16 ”使 用 StackPanel 布 局 的 选项 表 


实际 工作 中 ， 我 们 可 以 使 用 Orientation ^ HorizontalAlignment 和 
VerticalAlignment 三 个 属性 组 合 出 各 种 排列 和 对 齐 方式 。 


5.4.4 Canvas 


CanvasiÉ it X oie pg", tA, fECanvas € M Js) SL ERE In EB ds 
件 一 样 。 使 用 Canvas 布 局 与 在 Windows Form 窗 体 上 布局 基本 上 是 一 样 
的 ， 只 是 在 Windows Form 开 发 时 我 们 通过 设置 控件 的 Left 和 Top 等 属性 
来 确定 控件 在 窗 体 上 的 位 置 ， 而 WPF 的 控件 没有 Left 和 Top 等 属性 ， 就 
像 把 控件 放 在 Grid 里 时 会 被 附加 上 Grid.Column 和 Grid.Row 属 性 一 样 ， 
当 控 件 补 放置 在 Canvas 里 时 就 会 被 附加 上 Canvas.X 和 Canvas.Y 属 性 。 


Canvas 很 容易 被 从 Windows Form 渤 移 过 来 的 程序 员 所 小 用， 实际 上 大 
多 数 时 候 我 们 都 可 以 使 用 Grid 或 StackPanel 等 布局 元 素 产 生 更 简洁 的 布 
局 。Canvas 适 用 的 场合 包括 : 

e 一 经 设计 基本 上 不 会 再 有 改动 的 小 型 布局 (如 图 标 ) 。 

e 艺术 性 比较 强 的 布局 。 


o 需要 大 量 使 用 横 纵 坐 标 进 行 绝对 点 定位 的 布局 。 


e 依 顿 于 横 纵 坐标 的 动画 。 


下 面 的 代码 是 一 个 使 用 Canvas 代 替 Grid 设 计 的 登录 窗口 ， 除 非 你 确定 这 
不 然 还 是 用 Grid 进行 布 
H 性 全 9 


«Window x:Class-"WpfApplication] Window!" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title=" 登 录 " Height-"140" Width="300"> 
<Canvas> 
<TextBlock Text=" 用 户 名 ;" Canvas,Left="12" Canvas,Top="12"/> 
<TextBox Height="23" Width="200" BorderBrush-"Black" Canvas.Left-"66" Canvas.Top="9" /> 
<TextBlock Text=" 密 码 ;" Canvas.Left="12" Canvas. Top="40.72" Height="16" Width="36" /> 
<TextBox Height="23" Width="200" BorderBrush-"Black" Canvas.Left="66" Canvas. Top="38" /> 
«Button Content=" 确 定 " Width="80" Height="22" Canvas.Left-" 100" Canvas,Top="67" /> 
«Button Content=" 清 除 " Width="80" Height="22" Canvas.Left-"186" Canvas.Top-"67" /» 
</Canvas> 
</Window> 


运行 效 末 如 图 5-17 所 示 。 


图 5-17 使 用 Canvas 设 计 的 登录 窗口 


最 后 ， 与 Grid 一 样 ， 如 果 两 个 元 素 在 Canvas 内 部 占据 相同 的 位 置 ， 亦 是 
代码 中 后 书写 的 元 素 会 窗 盖 在 先 书写 的 元 素 之 上 。 想 要 显露 盖 在 下 面 
um 可 以 在 代码 中 修改 上 面 元 素 的 Visibility 属 性 值 或 Opacity 属 性 


5.4.5 DockPanel 


DockPanel 内 的 元 素 会 被 附加 上 DockPanel.Dock 这 个 属性 ， 这 个 属性 的 
数据 类 型 为 Dock 枚 举 。Dock 枚 举 可 取 Left、Top、Right 和 Bottom 四 个 
值 。 根 据 Dock 属 性 值 ，DockPanel 内 的 元 和 际会 回 指 定 方 加 和 票 积 、 切 分 
DockPanel 内 部 的 剩余 可 用 空间 ， 就 像 船舶 靠 岩 一样 。 


DockPanel 还 有 一 个 重要 属性 一 一 bool 类 型 的 LastChildFill， 它 的 默认 值 
是 True。 当 LastChildFill 属 性 的 值 为 True 时 ，DockPanel 内 最 后 一 个 元 到 
的 DockPanel. Dock 属 性 值 会 被 忽略 ， 这 个 元 素 会 把 DockPanel 内 部 所 有 
剩余 空间 充满 。 这 也 正好 解释 了 为 什么 Dock 枚 举 类 型 没有 Fi 这 个 值 。 


下 面 是 一 个 DockPanel 的 简单 示例 : 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-"Window|" Height-"300" Width-"400"» 
«Grid» 
«DockPanel» 
«TextBox DockPanel.Dock-"Top" Height-"25" BorderBrush-"Black"/» 
«TextBox DockPanel.Dock-"Left" Width-"] 50" BorderBrush-"Black"/» 
«TextBox BorderBrush-"Black"/» 
</DockPanel> 
</Grid> 


</Window> 


它 的 运行 效果 如 图 5-18 所 示 。 


图 5-18 ”DockPanel 布 局 示例 


看 到 这 个 效果 图 ， 很 自然 让 人 想到 能 不 能 在 下 部 两 个 TextBox 之 间 加 上 
一 个 可 拖 搜 的 分 隔 栏 ， 让 用 户 能 调整 TextBox 的 宽度 。 可 惜 ，DockPanel 
不 具备 这 样 的 功能 ， 我 们 只 能 使 用 Grid 和 GridSplitter 来 实现 这 个 需求 
(Gridsplitter 会 改变 Grid 初始 设置 的 行 高 或 列 宽 ) 。 下 面 是 实现 代码 ; 


«Window x:Class-"WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-" Window" Height-"300" Width-"400"» 

«Grid» 
«Grid. RowDefinitions? 
<RowDefinition Height-"25"/» 
«RowDefinition/ 
«/Grid.RowDefinitions? 
«Grid.ColumnDefinitions? 
«ColumnDefinition Width-"150" /> 
«ColumnDefinition Width-" Auto"/» 
«ColumnDefinition > 
«/Grid.ColumnDefinitions? 
«TextBox Grid.ColumnSpan-"3" BorderBrush-"Black"/» 
«TextBox Grid. Row-"l" BorderBrush-" Black"/» 
«GridSplitter Grid.Rowz"1" Grid.Columnz"1" 
VerticalAlignmentz" Stretch" 
HorizontalAlignmentz " Center" 
Widthz "5" 
Backgroundz" Gray" 
ShowsPreviewz"True" /» 
«TextBox Grid. Row-"]" Grid.Column-"2" BorderBrush-"Black"/» 
«Grid» 
</Window> 


运行 结果 如 图 5-19 所 示 。 


图 5-19 ”可 拖 搜 的 分 隅 栏 


5.4.6 WrapPanel 


WrapPanel 内 部 采用 的 是 流 式 布局 。WrapPanel 使 用 Orientation 属 性 来 控 
制 流 延伸 的 方向 ， 使 用 HorizontalAlignment 和 VerticalAlignment 两 个 属 
性 控制 内 部 控件 的 对 齐 。 在 流 延 伸 的 方向 上 ，WrapPanel 会 排列 尽 可 能 
多 的 控件 ， 排 不 下 的 控件 将 会 新 起 一 行 或 一 列 继续 排列 。 


下 面 古 一 个 简单 的 例子 : 


«Window x:Class-" WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http;//schemas.microsoft.com/winfx/2006/xaml" 
Title-" Window]" Height-"300" Width-"400"» 
«WrapPanel^ 

«Button Width" 50" Height-"50" Content-"OK"/» 
«Button Width" 50" Height-" 50" Content-"OK"/» 
«Button Width-" 50" Height-" 50" Content" OK"/» 
«Button Width" 50" Height-"50" Content-"OK"/» 
«Button Width" 50" Height-"50" Content-"OK"/» 
«Button Width" 50" Height-"50" Content-"OK"/» 
«Button Width-"50" Height-" 50" Content-"OK"/» 
«Button Width-" 50" Height-"50" Content-" OK"/» 
«Button Width" 50" Height-"50" Content-"OK"/» 
«/WrapPanel» 
</Window> 


改变 窗 体 的 尺寸 ，WrapPanel 会 调整 内 部 控件 的 排列 ， 如 图 5-20 所 示 。 


图 5-20 ”WrapPanel 布 局 示例 
5.5 “小 结 


形 而 上 者 谓 之 道 ， 形 而 下 者 谓 之 器 。 这 本 书 主要 研究 的 是 WPF 的 内 部 
机 理 ， 可 以 说 是 WPF 之 “ 道 ”， 然 而 ， 如 有 果 没 有 动手 实践 写 程序 这 
个 “器 ”， 何 以 载 道 ? 本 章 的 知识 先是 介绍 了 WPF 探 件 的 类 型 ， 任 何 一 
个 WPF 控 件 都 不 会 脱离 这 几 种 类 型 ， 只 要 你 能 举一反三 、 见 微 知 著 ， 
那么 所 有 控件 之 间 的 差别 就 只 在 细微 之 处 了 。 本 半 还 介绍 了 如 何 使 用 
布局 元 素 将 控件 排列 在 UI 上 、 写 出 有 实用 意义 的 GUI 程 序 。 学 完 这 章 知 
识 ， 我 们 已 然 可 以 动手 编写 WPF 程 序 了 。 后 面 的 章节 就 在 这 个 “器 ?的 
承载 之 下 ， 深 入 研究 编写 优秀 WPF 程 序 的 方法 。 


第 二 部 分 游历 WPF 内 部 世界 


| AEN 
4 ^ s5 


生产 工具 的 先进 程度 代表 了 生产 力 的 水 平 。 纵 观 Windows GUI 

(Graphic User Interface ， 图 形 用 户 界 面 ) 应 用 程序 开发 工具 的 发 展 历 
史 ， 程 序 员 们 在 短 短 十 几 年 内 就 经 历 了 从 石器 时 代 到 电气 时 代 的 变 草 
一 一 从 WindowsAPI、 MFC (K EX I B) 到 Visual Basic 再 
到 .NETFramework。 编程 工具 之 所 以 能 代表 软件 开发 的 生产 力 是 因为 每 
种 工具 背后 都 隐藏 着 一 整套 软件 开发 的 概念 和 方法 。 比 如 使 用 Visual 
C++ 这 个 工具 进行 WindowsAPI 开 发 时 ， 我 们 用 不 到 它 所 文 持 的 C++ 功 
能 ， 仪 仅 是 使 用 C 语 言 的 功能 、 在 面向 过 程 的 框架 内 调用 Windows 数 以 
万 计 的 API 函 数 、 依 赖 Windows 的 消息 机 制 来 创造 我 们 想 要 的 效果 ; GEH 
f Fd Visual C++ 进行 MEFC 开 发 ， 程 序 员 就 可 以 使 用 C++ 语言 进行 面向 对 
象 编 程 了 ，Windows API 也 被 封装 成 与 控件 对 应 的 类 ，Windows 的 消息 
被 封 痛 成 事件 的 稚 形 ; 竺 到 使 用 Visual C++ 和 Visual Basic 进 行 
COM/ActiveX 开 发 时 ， 程 序 员 们 的 开发 理念 又 上 升 到 组 件 化 (更 高 级 
的 复 用 和 面向 对 象 ，， 事 件 机 制 日 趋 完 善 ， 进 入 .NET 时 代 后 ， 程 序 设 
计 已 经 完全 组 件 化 ， 托 管 的 Visual C++ ^ Visual Basic 和 Visual C# 可 以 共 
享 组 件 ， 同 时 还 建立 成 了 完善 的 Web 应 用 程序 开发 平台 ..……… 


每 套 开 发 的 概念 和 方法 实际 上 束 是 一 套用 于 解决 编程 问题 、 实 现 客户 
需求 的 理论 ， 我 们 谓 之 开发 的 方法 论 。 从 Windows API 到 .NET 
Framework， 开 发 的 方法 论 越 来 越 进化 ， 越 来 越 高 效 。WPF 的 开发 方法 
论 是 在 .NET Framework 方 法 论 的 基础 上 更 上 一 层 楼 的 产物 ERE 
兼容 现 有 Windows Form F A TEW, ERER L AmE TAA 
和 创新 。 下 面 就 是 WPF 开 发 方法 论 的 一 些 要素 : 


e 全 新 的 UI 设 计 理 念 : XAML 语 言 以 及 配套 工具 (包括 Blend 和 
Design) 。 


e 全 新 的 UI 布 局 理念 : 树 形 结构 和 各 种 布局 元 素 。 


o 全 新 的 基础 类 库 和 控件 集 : 所 有 控件 者 在 WPF 方 法 论 的 框架 下 重新 
设计 并 放置 在 System.Windows.Controls 名 称 空间 里 〈 这 就 是 为 什么 总 能 
f£System.Windows.Forms) 找到 同名 控件 的 原因 。 


e 升级 的 程序 驱动 模式 ， 在 事件 驱动 的 基础 上 把 事件 包装 在 数据 关联 
(Data Binding) 里 ， 变 原来 的 “UI 事件 驱动 程序 运行 ”为 “数据 驱动 程序 
运行 并 显示 在 UI 上 ”， 让 数据 从 被 动 和 从 属 的 地 位 回 到 了 程序 的 核心 地 
位 (这 也 正 符合 了 内 容 决定 形式 的 基本 思维 方式 ) 。 


e 升级 的 属性 系统 : 在 . Framework 属 性 的 基础 上 新 增 依赖 属性 
m Property). 系统 以 及 其 派生 出 来 的 附加 属性 (Attached 
Property) œ° 


e 升级 的 事件 系统 ， TENET Framework 事 件 的 基础 上 新 增 路 由 事件 
(Routed Event) 系统 和 基于 它 的 命令 (Command) 系统 。 


e 升级 的 资源 系统 : WPF 程 序 可 以 使 用 资源 (Resource) 存储 更 丰富 
的 内 容 并 能 进行 非常 方便 的 检索 。 


e 全 新 的 模板 理念 : 在 WPF 中 ， 内 容 决 定形 式 的 理念 随处 可 见 。 如 果 
把 控件 的 功能 视 为 内 容 ， 则 可 使 用 控件 模板 (Control Template) 来 控 
制 它 的 展现 ; 如果 把 数据 视 为 内 容 ， 则 可 使 用 数据 模板 (Data 
Template) 把 数据 展现 出 来 。 


e 全 新 的 文档 与 打印 系统 : 基于 XPS 文 档 格 式 ，WPF 推 出 了 一 整套 与 
文档 显示 和 打印 相关 的 类 和 控件 。 


e 全 新 的 3D 绘 图 系统 : WPF 不 但 具有 2D 绘 图 功能 ， 还 以 完整 的 类 库 
文 持 3D 绘 图 、 视 角 和 光影 效 采 。 


。 全 新 的 动画 系统 : WPF 具 有 丰富 的 动画 (Animation) 创作 类 库 ， 
以 前 需要 程序 员 费 尽心 思 才 能 实现 的 动画 效果 现在 由 设计 师 使 用 
XAML 就 能 实现 (有 时 也 需要 程序 用 后 台 代 码 实 现 ; ， 很 容易 束 能 设 
计 出 炫丽 多 彩 的 应 用 程序 。 


WPF 里 的 新 理念 之 多 让 人 全 然 心动 之 余 不 免 会 有 些 发 蛋 
新 东西 ， 需 要 多 久 才 能 掌握 ? 其实， 这些 新 理念 EAHUAE ER GS 
念 派生 出 来 的 ， 在 每 个 新 理念 中 你 都 能 找 熟悉 的 影子 。 温 改 知 新 、 同 
时 尽 可 能 地 使 用 WPF 进 行 项 目 开 发 ， 两 个 月 的 时 间 绎 绰 有 余 


顺便 提醒 大 家 一 句 : 开发 的 方法 Y 仑 是 开发 工具 的 精髓 ， 和 掌握 了 一 种 开发 方法 论 束 掌 握 了 精通 某 
种 开发 工具 的 钥匙 。 只 学 习 某 种 开发 工具 而 不 去 深 完 其 方法 论 和 内 酒 便 是 舍 本 逐 来; 者 是 使 用 
某 种 开发 工具 去 实践 男 一 种 开发 工具 背后 的 方法 论 就 更 是 南 辕 北 办 了 。 比 如 ， 我 束 见 过 一 
Pe M Hee 一 味 地 依靠 旧 有 经 验 ， 活 生生 把 WPF 当 作 Windows Form 来 用 ， 
下 和 昔 功 实在 


il 党 * 


本 部 分 将 对 WPF 方 法 论 中 的 新 理念 逐一 剖析 ， 与 大 家 一 起 游历 WPF 精 
彩 的 内 部 世界 ! 


6 
URSI TR Binding 


友好 的 图 形 用 户 界 面 (Graphic User Interface, GUI) 的 流行 也 就 是 近 十 
来 年 的 事情 ， 之 前 应 用 程序 与 用 户 的 交互 多 是 通过 控件 台 界 面 

(Console User Interface, CUI) 完成 的 ， 我 至 今 也 忘 不 了 刚刚 开始 学 习 
DOS 操 作 时 那 种 敲 进 一 条 命令 按 下 回 车 后 不 知道 会 有 什么 结果 产生 的 
新 奇 感 觉 。 图 形 用 户 界 面 的 操作 系统 开始 在 中 国 流行 应 该 是 从 Windows 
95 正 式 发 布 开始 的 ， 旋 即 冠 以 Visual 的 开发 工具 (以 及 Borland 公 司 的 一 
些 同 类 产品 ) 也 跟着 田 露 头角 。 记 得 那 时 候 硬 件 能 跑 起 windows 95 就 
已 经 相当 不 错 了 图 形 化 的 界面 还 是 很 消耗 硬件 资源 的 。 


GUI 作为 新 鲜 事 物 ， 理 所 当然 地 成 为 了 无 论 是 操作 系统 制造 商 还 是 硬件 
厂商 们 关注 的 焦点 。 我 们 暂且 搬 开 硬件 不 谈 单 说 操作 系统 开发 商 ， 也 
MEMEK ° Windows GUI 运行 的 机 理 是 使 用 消息 (Message) 来 驱使 程 
序 癌 前 运行 ， 消 息 的 主要 来 源 是 用 户 的 操作 ， 比 如 单 击 鼠标 、 按 下 按 
钮 ， 都 会 产生 消息 ， 消 息 又 会 被 windows 翻 译 并 送 达 目 标 程序 然后 被 程 
序 所 处 理 。 这 上 听 起 来 并 没有 什么 问题 ， 我 们 尽管 把 消息 看 作 是 DOS 命 
令 的 升级 版 好 了 。 这 种 大 于 操作 系统 底层 的 机 理 势必 深刻 地 影响 到 应 
用 软件 开发 的 方法 论 。 为 了 能 编写 出 Windows 上 运行 的 GUI 程序 ， 各 种 
开发 方法 论 也 必须 跟从 这 种 “ 消 恩 驱动 程序 ”的 基本 原理 。 正 是 沿 着 这 
条 路 发 展 ， 才 有 了 Windows API 开 发 的 纯 消 恩 哎 动 、 才 有 了 MEFC 等 
C++ 类 库 的 消息 张 动 、 才 有 了 从 Visual Basic 开 始 到 .NET Framework 的 事 
件 驱 动 一 一 总 之 一 句 话 ， 程 序 是 被 来 自 UI 的 事件 〈 即 封装 过 的 消息 ) 
红 使 回 前 的 ， 人 简称 “ 消 恩 驱动 * 或 “事件 驱动 *。 因为 消 恩 和 事件 大 都 来 日 
于 UI， 所 以 统称 它们 为 “UI 驱动 程序 ”。 


消息 驱动 或 者 事件 驱动 本 身 并 没有 错 ， 但 从 更 高 的 层次 上 来 看 ， 使 
用 “UI 驱动 程序 ”开发 程序 则 是 “为 了 GUI 而 GUI”、 单 纯 地 为 了 实现 程序 
的 GUI 化 。 实 际 上 这 已 经 背离 了 程序 的 本 质 数据 加 算法 ， 同 时 迫使 
程序 员 把 很 多 精力 放 在 了 实现 UI 的 编程 上 。 这 还 不 算 完 ， 随 着 程序 UI 
的 日 趋 复杂 ，UI 层 面 上 的 代码 与 用 于 处 理 数据 的 逻辑 代码 也 渐渐 纠缠 
在 一 起 变 得 难以 维护 。 为 了 避免 这 样 的 问题 ， 程 序 员 们 总 结 出 了 
Model-View-Controler (MVC) 和 Model-View-Presenter (MVP) 等 诸多 
设计 模式 来 把 UI 相 关 的 代码 与 数据 逻辑 相关 的 代码 分 开 。 


让 我 们 回归 程序 的 本 质 。 程 序 的 本 质 是 数据 加 算法 ， 用 户 给 进 一 个 输 
入 ， 经 过 算法 的 处 理 程序 会 反馈 一 个 输出 一 一 这 里 ， 数 据 处 于 程序 的 
核心 地 位 。 反 过 头 来 再 看 “UI 驱动 程序 ?"， 数 据 处 于 被 动 地 位 ， 辟 是 在 
等 待 程序 接收 来 自 UI 的 消息 事件 后 被 处 理 或 者 算法 完成 处 理 后 被 显 
示 。 如 何在 GUI 编程 时 把 数据 的 地 位 由 被 动 变 主 动 、 让 数据 回归 程序 的 
核心 呢 ? 这 就 是 本 章 要 详细 讲述 的 Data Binding ° 


6.1 Data Binding 在 WPF 中 的 地 位 


如 果 把 一 个 应 用 程序 看 作 一 个 城市 ， 那 么 这 个 城市 内 部 的 交通 肯定 会 
非常 繁忙 ， 但 川 流 不 居 的 不 是 行人 和 和 车辆 而 是 数据 。 一 般 情 况 下 ， 应 
用 程序 会 具有 三 层 结构 ， 即 数据 存储 层 、 数 据 处 理 层 和 数据 展示 层 。 
存储 层 相 当 于 一 个 城市 的 仓储 区 ， 由 数据 库 和 文件 系统 构成 ， 处 理 层 
更 正确 的 称呼 应 该 是 逻辑 层 ， 与 业务 逻辑 相关 、 用 于 加 工 处 理 数据 的 
算法 都 集中 在 这 里 ， 这 一 层 相 当 于 城市 的 工业 区 ;展示 层 的 功能 是 把 
加 工 后 的 数据 通过 可 视 的 界面 展示 给 用 户 或 者 通 过 其 他 种 类 的 接口 展 
示 给 别 的 应 用 程序 (界面 和 接口 两 个 词 在 英文 中 均 为 interface， 所 以 本 
质 上 没有 什么 区 别 ) ， 还 需要 收集 用 户 的 操作 、 把 它们 反馈 给 逻辑 
层 ， 所 以 这 一 层 相 当 于 城市 的 港口 区 。 


如 末 你 是 一 名 市 长 ， 你 束 要 对 这 个 城市 的 布局 和 发 展 人 负责 一 一 仓储 
区 、 产 业 园 和 海港 区 ， 你 打算 怎么 投资 ? 每 个 园区 下 多 大 力气 开发 ? 
每 个 园区 内 部 应 该 怎么 发 展 ? 几 个 区 之 间 的 交通 如 何 规划 才能 整洁 高 
效 ? 怎样 为 未 来 的 扩建 留 有 余地 .…… 这 些 都 是 你 要 面 对 的 问题 。 其 
实 ， 架 构 师 要 做 的 事情 也 是 这 些 ! 


程序 的 本 质 是 数据 加 算法 。 数 据 会 在 存储 、 你 辑 和 展示 三 个 层 流 通 ， 
所 以 站 在 数据 的 角度 上 来 看 ， 这 三 层 都 很 重要 。 但 算法 在 程序 中 的 分 
E 对 于 一 个 三 层 结构 的 程序 来 说 ， 算 法 一 般 分 布 在 这 几 


， 数据库 内 部 。 

. 读 取 和 写 回 数据 。 
.业务 逻辑 。 
.数据 展示 。 
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E 界面 与 逻辑 的 交互 。 
A、B 两 个 部 分 的 算法 一 般 都 非常 稳定 ， 不 会 轻易 去 改动 ， 复 用 性 也 很 
高 ;C 处 与 客户 需求 关系 最 紧密 、 最 复杂 ， 变 动 也 最 大 ， 大 多 数 算法 都 


È 


集中 在 这 里 ，D、 了 两 层 负 责 UI 与 逻辑 的 交互 ， 也 占有 一 定量 的 算法 。 


显然 ，C 部 分 是 程序 的 核心 、 是 开发 的 重 中 之 重 ， 所 以 我 们 应 该 把 精力 
集中 在 C 部 分 。 然 而 ，D、E 两 个 部 分 却 经 常 成 为 麻烦 的 来 源 。 首先， 
这 两 部 分 都 与 逻辑 层 紧 密 相 关 ， 一 不 小 心 束 有 可 能 把 本 来 该 放 在 逻辑 
层 里 的 算法 写 进 这 两 部 分 (所 以 才 有 了 MVC、MVP 等 模式 来 避免 这 种 
情况 出 现 ) ; 其 次 ， 这 两 个 部 分 以 消息 或 事件 的 方式 与 逻辑 层 沟通 ， 
一 旦 出 现 同 一 个 数据 需要 在 多 处 展示 修改 时 ， 用 于 同步 的 代码 就 会 
错综复杂 ; 最 后 ，D 和 E 本 应 是 互 逆 的 一 对 儿 ， 但 却 需 要 分 开 来 写 
显示 数据 写 一 个 算法 、 修 改 数据 又 是 一 个 算法 。 忌 之 导致 的 结果 就 是 D 
和 E 两 个 部 分 会 占 去 一 部 分 算法 ， 搞 不 好 还 会 牵扯 不 少 精 力 。 


问题 的 根源 就 在 于 逻辑 层 与 展示 层 的 地 位 不 固定 当 实 现 客户 需求 
的 时 候 ， 逻 辑 层 的 确 处 在 中 心地 位 ， 但 到 了 实现 UI 交互 的 时 候 展 示 层 
又 处 于 中 心地 位 。WPF 作 为 一 种 专门 的 展示 层 技 术 ， 华 丽 的 外 观 和 动 
画 只 是 它 的 表层 现象 ， 更 重要 的 是 它 在 深层 次 上 帮助 程序 员 把 思维 的 
重心 固定 在 了 逻辑 层 、 让 展示 层 永远 处 于 逻辑 层 的 从 属地 位 。WPF 具 
有 这 种 能 力 的 关键 是 它 引 入 了 Data Binding 概 念 以 及 与 之 配套 的 
Dependency Property 系 统 和 DataTemplate ° 


在 从 传统 的 Windows Form 迁 移 到 WPF 之 后 ， 对 于 一 个 三 层 程序 而 言 ， 
数据 存储 层 由 数据 库 和 文件 系统 来 构建 ， 数 据 传输 和 处 理 仍 然 使 
用 .NET Framwork 的 ADO.NET 等 基本 类 ( Ej windows Form 等 开发 一 
FÉ) ， 展 示 层 则 使 用 WPF 类 库 来 实现 ， 而 展示 层 与 逻辑 层 的 沟通 就 使 
用 Data Binding 来 实现 。 可 见 ，Data Binding 在 WPF 系 统 中 起 到 的 是 数据 
高 速 公路 的 作用 。 有 了 这 条 高 速 公 路 ， 加 工 好 的 数据 会 自动 送 达 用 户 
界面 加 以 显示 ， 被 用 户 修 改过 的 数据 也 会 目 动 传 回 逻辑 层 ， 一 旦 数据 
被 加 工 好 又 会 被 送 达 用 户 界 面 .………. 程序 的 逻辑 层 就 像 一 个 强 有 力 的 引 
擎 不 停 运转 ， 用 加 工 好 的 数据 张 动 程序 的 用 户 界 面 以 文字 、 图 形 、 动 
画 等 形式 把 数据 显示 出 来 这 下 是 “数据 驱动 UI”。 


引入 Data Binding 机 制 后 ，D、E 两 个 部 分 会 简化 很 多 。 首 先 ， 数 据 在 逻 
辑 层 与 用 户 界 面 之 间 “ 直 来 直 去 ”、 不 涉及 逻辑 问题 ， 这 样 用 户 界 面部 
分 几乎 不 包含 算法 ; Data Binding 本 里 束 是 双 疝 通信 ， 所 以 相当 于 把 D 


和 EE 合 二 为 一 ， 对 于 多 个 UI 元 素 关 注 同一 个 数据 的 情况 ， 只 需 使 用 Data 
Binding 把 这 些 UI 元 素 一 一 与 数据 关联 上 (以 数据 为 中 心 的 星 形 结 
FJ) ， 当 数据 变化 后 这 些 UI 元 素 会 同步 显示 这 一 变化 。 你 看 ， 前 面 提 
到 的 那些 问题 生 不 是 迎刃而解 ! 更 重要 的 是 ， 经 过 这 样 的 优化 ， 所 有 
与 业务 逻辑 相关 的 算法 都 处 在 数据 逻辑 层 ， 逻 辑 层 成 为 一 个 能 够 独立 
运转 的 、 完 整 的 体系 ， 而 用 户 界 面 层 则 不 含 任何 代码 、 完 全 依赖 和 从 
属于 数据 逻辑 层 。 这 样 做 有 两 个 显而易见 的 好 处 ， 第 一 ， 如 采 把 UI 层 
看 作 是 应 用 程序 的 “ 皮 ”、 把 存储 层 和 逻辑 层 看 作 是 程序 的 “对 ”， 那 么 我 
们 可 以 很 轻易 地 把 皮 从 攻 上 撕 下 来 并 换 一 个 新 的 ， 第 二 ， 因 为 数据 层 
能 够 独立 运转 、 自 成 体系 ， 所 以 我 们 可 以 进行 更 完善 的 单元 测试 而 无 
需 借助 UI 目 动 化 测试 工具 一 一 你 完全 可 以 把 单元 测试 代码 想象 成 一 
个 “看 不 见 的 UI*， 单 元 测试 只 是 使 用 这 个 “UIT” 绕 过 真实 的 UI 直接 测试 
业务 逻辑 爱 了 。 


6.2 ”Binding 基 础 


如 果 不 知道 Binding 一 词 的 含义 ， 那 么 它 将 永远 是 大 脑 中 的 一 个 符号 。 
Binding 一 词 在 汉语 中 究竟 是 什么 意思 呢 ? 大 概 是 出 于 方便 ， 业 界 一 直 
使 用 Binding 一 词 的 音译 ， 即 “ 绑 定 >”。 这 绑 定 中 的 “ 绑 ” 大 概 是 取材 于 
Bind 这 个 词 的 “捆绑 ”之 “ 绑 ”; “ 定 ? 刚 更 像 是 一 个 拼音 以 音译 音 ， 没 
什么 意义 。 实 际 上 ， 贡 文中， 动词 Bind 在 转化 为 名 词 Binding 后 ， 除 了 
原 有 的 “捆绑 ”之 意外 又 引申 出 了 “关联 和 “ 键 联 * 的 含义 。 比 如 ， 原 子 键 
联 (atomic binding) 、 化 学 键 联 (chemical binding) 、 联 结 梁 

(binding-beam) 等 都 用 到 了 Binding 一 词 。 也 就 是 说 ，Binding 更 注重 
表达 它 是 一 种 像 桥架 一 样 的 天 联 厌 系 。WPF 中 ， 正 是 在 这 段 桥架 上 我 
们 有 机 会 为 往来 流通 的 数据 做 很 多 事情 。 


如 采 把 Binding 比 作 数 据 的 桥梁 ， 那 么 它 的 两 端 分 别 是 Binding 的 源 

(Source) 和 目标 (Target) 。 数 据 从 哪里 来 哪里 就 是 源 ，Binding 是 架 
在 中 间 的 桥梁 ，Binding 目 标 是 数据 要 往 哪儿 去 (所 以 我 们 就 要 把 桥架 
向 哪里 ) 。 一 般 情况 下 ，Binding 源 是 逻辑 层 的 对 象 ，Binding 目 标 是 UI 
层 的 控件 对 象 ， 这 样 ， 数 据 就 会 源源 不 断 通 过 Binding 送 达 UI 层 、 被 UI 
层 展现 ， 也 束 完 成 了 数据 驱动 UI 购 过程。“ 一 桥 飞 架 南 北 ， 天 和 至 变通 
途 *"， 我 们 可 以 想象 Binding 这 座 桥梁 上 铺设 了 高 速 公路 ， 我 们 不 但 可 以 
控制 公路 是 在 源 与 目标 之 间 双 癌 通 行 还 是 某 个 方 同 的 单行 道 ， 还 可 以 
控制 对 数据 放行 的 时 机 ， 甚 至 可 以 在 桥 上 架设 一 些 “ 关 卡 ”* 用 来 转换 数 
据 类 型 或 者 检验 数据 的 正确 性 。 


对 Binding 有 了 一 个 形象 的 基本 概念 后 ， 让 我 们 看 一 个 最 基本 的 例子 。 
a 子 就 古 创建 一 个 简单 的 数据 源 并 通过 Binding 把 它 连 接 到 UI 元 素 


RE ， 我 们 创建 一 个 名 为 Student 的 类 ， 这 个 类 的 实例 将 作为 数据 源 来 


class Student 


private string name; 


public string Name 
| 
get | return name; | 
set | name = value; | 
l 
} 


可 以 看 到 Student 这 个 类 非常 帘 单 ， 人 简单 到 只 有 一 个 string 类 型 的 Name 属 
性 。 前 面 说 过 ， 数 据 源 是 一 个 对 象 ， 一 个 对 象 吴 上 可 能 有 很 多 数据 ， 
这 些 数据 又 通过 属性 又 露 给 外 界 。 那 么 ， 其 中 哪个 数据 是 你 想 通 过 
Binding 送 达 UI 元 素 的 呢 ? 换 句 话 说 ，UI 上 的 元 素 关 心 的 是 哪个 属性 值 
的 变化 呢 ? 这 个 属性 就 称 为 Binding 的 路 径 (Path) 。 但 光 有 属性 还 不 
行 Binding 是 一 种 上 自动 机 制 ， 当 值 变化 后 属性 要 有 能 力 通知 
Binding， 让 Binding 把 变化 传递 给 UI 元 素 。 怎 样 才能 让 一 个 属性 具备 这 
种 通知 Binding 值 已 经 变化 的 能 力 呢 ? 方法 是 在 属性 的 set 语 句 中 激发 一 
个 PropertyChanged 事 件 。 这 个 事件 不 需要 我 们 自己 声明 ， 我 们 要 做 的 
是 让 作为 数据 源 的 类 实现 System.ComponentModel 名 称 空间 中 的 
INotifyPropertyChangedfZ L1 ° 34 X Binding Et T ZUR, Binding 
会 目 动 侦 听 来 自 这 个 接口 的 PropertyChanged 事 件 。 


实现 了 INotifyPropertyChanged 接 口 的 Student 类 看 起 来 是 这 样 : 


class Student : INotifyPropertyChanged 


| 
1 


public event PropertyChangedEventHandler PropertyChanged; 
private string name; 


public string Name 


get | return name; } 
set 
Í 
\ 
name = value; 
/| 激发 事件 
if (this.PropertyChanged != null) 


j 
1 


this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Name")); 


经 过 这 样 一 升级 ， 当 Name 属 性 的 值 发 生变 化 时 PropertyChanged 事 件 就 
会 被 激发 ，Binding 接 收 到 这 个 事件 后 发 现 事件 的 消息 告诉 它 是 名 为 
性 发 生 了 值 的 改变 ， 于 是 就 会 通知 Binding 目 标 端 的 UI 元 素 显 
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然后 ， 我 们 在 窗 体 上 准备 一 个 TextBox 和 一 个 Button。TextBox 将 作为 
Binding 目 标 ， 我 们 还 会 在 Button 的 Click 事 件 发 生 时 改变 Student 对 象 的 
Name 属 性 值 。 


«Window x:Class-"WpfApplication]. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" Simple Binding" Height-"1 10" Width-"300"» 
«StackPanel^ 
«TextBox x:Name-"textBoxName" BorderBrush-"Black" Margin-"5" /> 
«Button Content-"Add Age" Margin-"5" Click-"Button Click" /> 
«JStackPanel» 
</Window> 


结果 如 图 6-1 所 示 。 


E` Simple Binding 
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图 6-1 在 窗 体 上 准备 一 个 TextBox 和 一 个 Button 


接 下 来 ， 我 们 将 进入 最 重要 的 一 步 一 一 使 用 Binding 把 数据 源 和 UI 元 素 
连接 起 来 。C# 代 码 如 下 : 


public partial class Window : Window 
i 

Student stu; 

public Window1() 

| 

| 


InitializeComponent(); 


Il it 从 * lii 源 


stu = new Student(); 


I| WE% Binding 
Binding binding new Binding(); 
binding.Source = stu; 


binding.Path = new PropertyPath("Name"); 


I| EF] Binding 连接 数据 源 与 Binding 目标 
BindingOperations.SetBinding(this.textBoxName, TextBox.TextProperty, binding); 


private void Button Click(object sender, RoutedEventArgs e) 


stu.Name += "Name"; 


让 我 们 逐 句 解读 一 下 这 段 代码 : 这 段 代码 是 Window1 类 的 后 台 部 分 ， 

它 的 UI 部 分 是 上 面 给 出 的 XAML 代 人 码 。“Student stu:” 是 为 Window1 类 声 

明了 一 个 Student 类 型 的 成 员 变 量 ， 这 样 做 的 目的 是 为 了 在 Window1 的 

" 后 人 右 中 都 能 访问 由 它 引 用 的 Student 实 例 
数据 源 ) 。 


f£ Window1HS T4] 3& 28 FP "InitializeComponent();" ze El 2/] AE EH fV 83, — FH 
途 是 初始 化 UI 元 素 。“stu=new Student();” 这 人 句 是 创建 了 一 个 Student 类 型 
的 实例 并 用 stu 成 员 变 量 引 用 它 ， 这 个 实例 就 是 我 们 的 数据 源 。 


在 准备 Binding 的 部 分 ， 先 是 用 “Binding binding-new Binding();" F HH 
Binding 类 型 变量 并 创建 实例 ， 然后 使 用 “binding.Source=stu; "Binding 
实例 指定 数据 源 ， 最 后 使 用 “binding.Path=new PropertyPath("Name");” 语 
句 为 Binding 指 定 访问 路 径 。 


把 数据 源 和 目标 连接 在 一 起 的 任务 是 使 
用 “BindingOperations.SetBinding(...)” 方 法 完成 的 。 这 个 方法 的 3 个 参数 
是 我 们 记忆 的 重点 : 


e 第 一 个 参数 用 于 指定 Binding 的 目标 ， 本 例 中 是 this.textBoxName ° 


e 与 数据 源 的 Path 原 理 类 似 ， 第 二 个 参数 用 于 为 Binding 指 明 把 数据 送 
达 日 你 的 哪个 属 | 性 。 只 是 你 会 发 现在 这 里 用 的 不 是 对 象 的 属性 而 是 类 
的 一 个 静态 态 只 读 (static readonly) 的 DependencyProperty 类 型 成 员 变 
量 ! 这 就 是 我 们 后 面 要 详细 讲述 的 与 Binding 息 息 相 关 的 依赖 属性 “其 
实 很 好 理解 ， 这 类 属性 的 值 可 以 通过 Binding 依 赖 在 其 他 对 象 的 属性 值 
上 上， 被 其 他 对 象 的 属性 值 所 驱动 。 


e 第 三 个 参数 很 明了 ， 就 是 指定 使 用 哪个 Binding 实 例 将 数据 源 与 目标 
天 联 起 来 。 

处 于 末尾 的 Button_Click(...) 方 法 是 Button 元 素 Click 事 件 的 处 理 絮 ， 在 
它 内 部 我 们 对 数据 源 的 Name 属 性 进行 了 更 新 。 


运行 程序 ， 当 你 单 击 Button 时 ，TextBox 束 会 即时 显示 更 新 后 的 Name 属 
性 值 ， 如 图 6-2 所 示 。 
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p——————————————————————————————————————— —————————À 
NameNameNameName 


Add Age 
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实际 工作 中 ， 实 施 Binding 的 代码 可 能 与 上 面 看 到 的 不 大 一样， 原因 是 
TextBox 这 类 UI 元 过 Hy Æ 类 FrameworkElement 对 
BindingOperations.SetBinding(...) 方 法 进行 了 封装 ， 封 装 的 结果 也 叫 
SetBinding， 只 是 参数 列表 发 生 了 变化 。 代 码 如 下 : 


public BindingExpressionBase SetBinding(DependencyProperty dp, BindingBase binding) 
| 
retum BindingOperations.SetBinding(this, dp, binding); 


1 
j 


同时 ， 有 经 验 的 程序 员 还 会 借助 Binding 类 的 构造 器 及 C# 3.0 的 对 象 初 
台 化 郁 语 法 来 简化 代码 。 这 样 一 来 ， 上 面 这 段 代 码 有 可 能 成 为 这 样 : 


public Window10) 


InitializeComponent(); 


J| 三 合 一 操作 
this.textBoxName.SetBinding( TextBox. TextProperty, new Binding("Name") | Source = stu = new Student() |); 
] 


通过 上 面 这 个 例子 ， 我 们 已 经 在 头脑 中 建立 起 了 如 图 6-3 所 示 的 模型 。 


Binding 目标 Binding XH% Binding (数据 ) 源 
依赖 对 象 u ! 普通 对 象 (实现 接口 ) 
pE vae 
Hg 
DNE m -—L. "T" (激发 事件 ) 


更 新 控制 


图 6-3 Binding 


有 了 这 个 例子 打 基础 ， 后 面 的 章节 我 们 将 细致 地 研究 Binding 的 每 个 特 


63 ” Binding 的 源 与 路 径 


Binding 的 源 也 就 是 数据 的 源头 。Binding 对 源 的 要 求 并 不 苛刻 H 
它 是 一 个 对 象 ， 并 且 通 过 属性 (Property) 公开 自己 的 数据 ， 它 就 能 作 
为 Binding 的 源 。 


前 面 一 个 例子 已 经 向 大 家 说 明 ， 如 果 想 让 作为 Binding 源 的 对 象 具 有 和 目 
动 通知 Binding 自 己 的 属性 值 已 经 变化 的 能 力 ， 那 么 就 需要 让 类 实现 
INotifyPropertyChanged 接 口 并 在 属性 的 set 语 句 中 激发 PropertyChanged 
事件 。 在 日 常 的 工作 中 ， 除 了 使 用 这 种 对 象 作 为 数据 源 外 ， 我 们 还 有 
更 多 的 选择 ， 比 如 控件 把 目 己 或 目 己 的 容 需 或 子 级 元 素 当 源 、 用 一 个 
控件 作为 另 一 个 控件 的 数据 源 、 把 集合 作为 IemsControl 的 数据 源 、 使 
用 XML 作为 TreeView 或 Menu 的 数据 源 、 把 多 个 控件 关联 到 一 个 “数据 
制高点 ”上 ， 甚 至 干脆 不 给 Binding 指 定数 据 源 、 让 它 自 己 去 找 。 下 面 ， 
我 们 就 分 述 这 些 情况 。 


63.4 ”把 控件 作为 Binding 源 与 Binding 标 记 扩 展 
前 面 提 过 ， 大 多 数 情况 下 Binding 的 源 是 逻辑 层 的 对 象 ， 但 有 时 候 为 了 


让 UI 元 素 产 生 一 些 联动 效果 也 会 使 用 Binding 在 控件 间 建 立 关 联 。 下 面 
的 代码 是 把 一 个 TextBox 的 Text 属 性 关联 在 了 Slider 的 Value 属性 上 。 


«Window x:Class="WpfApplication1.Window1" 

xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Control as Source" 
Height-"110" Width-"300"» 

«StackPanel» 
<TextBox x:Name-"textBox1" Text-"[Binding Path-Value, ElementName-sliderl]" BorderBrush-"Black" 

Margin" 5" /> 

«Slider x: Name-"slider 1" Maximum-" 100" Minimum-"0" Margin-"5" /> 

</StackPanel> 


</Window> 


运行 效果 如 图 6-4 所 示 。 
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图 6-4 ”使 用 Binding 在 控件 间 建 立 关联 


正如 大 家 所 见 ， 除 了 可 以 在 C# 代 码 中 建立 Binding 外 在 XAML 代 码 里 也 
可 以 方便 地 设置 Binding， 这 就 给 了 设计 师 很 大 的 目 由 度 来 决定 UI 元 素 
之 间 的 关联 情况 。 值 得 注意 的 是 ， 在 C# 代 码 中 可 以 访问 XAML 代 码 中 
声明 的 变量 但 XAML 代 码 中 却 无 法 访问 C# 代 码 中 声明 的 变量 ， 因 此 ， 
要 想 在 XAML 中 建立 UI 元 素 与 逻辑 层 对 象 的 Binding 还 要 顾 费 些 周 折 ， 
把 逻辑 层 对 象 声 明 为 XAML 代 码 中 的 资源 (Resource) ， 我 们 把 它 放 在 
资源 一 章 去 解释 。 


回 过 头 来 看 这 人 句 XAML 代 码 ， 它 使 用 了 Binding 标 记 扩 展 语法 : 


«TextBox x:Name-"textBox 1" Text="{Binding Path=Value, ElementName=sliderl}" BorderBrush="Black" Margin-"5" /» 
与 之 等 价 的 C# 代 码 是 : 
this.textBox1.SetBinding(TextBox.TextProperty, new Binding(" Value") (ElementName-"slider]" |); 
AH Binding2ZS A E si Zl Er n] PA Bell PathTE 742925, BEES S 83: 
«TextBox x:Name-"textBox 1" Text-" | Binding Value, ElementName-slider] ]" BorderBrush-" Black" Margin-"5" /> 


注意 


因为 在 C# 代 码 中 我 们 可 以 直接 访问 控件 对 象 ， 所 以 一 般 也 不 会 使 用 Binding 的 ElementName 
性 ， 而 是 直接 把 对 象 赋值 给 Binding 的 Source 属 性 


wl 


Binding 的 标记 扩展 语法 ， 初 看 起 来 平淡 无 奇 甚 至 有 些 别扭 ， 但 细 品 起 
来 就 会 发 现 它 的 精巧 之 处 。 说 它 “* 别 扭 > 是 因为 我 们 已 经 习惯 了 
Text="Hello World" 这 种 “ 键 一 值 ? 式 的 赋值 方式 ， 而 且 认 为 值 与 属性 的 
数据 类 型 一 定 要 一 致 一 一 大 脑 很 快 会 质询 Text="{fBinding Value, 
ElementName= slider1}" 的 字面 意思 Text 的 类 型 是 string， 为 什么 要 
研一 个 Binding 类 型 的 值 呢 ? 其 实 ， 我 们 并 不 是 为 Text 属 性 “ 屿 了 一 个 
Binding 类 型 的 值 "?， 为 了 消除 这 个 误会 ， 你 可 以 把 这 人 句 代 码 读 作 “ 为 Text 
属性 设置 Binding 为 .…….. ” o 再 想 深 一 步 ， 在 编程 时 我 们 不 是 经 常 把 函数 
视 为 一 个 值 吗 ? 只 是 这 个 值 需 要 在 函数 执行 结束 后 才能 得 到 。 同 理 ， 

我 们 也 可 以 把 {Binding} 视 为 一 个 值 ， 只 是 这 个 值 并 非 像 "Hello 
World" 字 从 串 一 样 直 接 和 固定。 也 就 是 说 ， 我 们 可 以 把 Binding 视 为 一 
种 间接 的 、 不 固定 的 赋值 方式 Binding 标 记 扩 展 很 恰当 地 表示 了 这 


duo 4 
6.3.3 ”控制 Binding 的 方向 及 数据 更 新 


Binding 在 产 与 目标 之 间 染 起 了 沟通 的 桥梁 ， 默 认 情 况 下 数据 既 能 够 通 
过 Binding 送 达 目 标 ， 也 能 够 从 目标 返回 源 (收集 用 户 对 数据 的 修 
P) 。 有 时候 数据 只 需要 展示 给 用 户 、 不 允许 用 户 修改 ， 这 时 候 可 以 
把 Binding 模 式 更 改 为 从 源 疝 目标 的 单亲 沟通 。Binding 还 文 持 从 目标 问 
源 的 单 向 沟通 以 及 只 在 Binding 关 系 确立 时 读 取 一 次 数据 ， 这 需要 我 们 
根据 实际 情况 去 选择 。 


控制 Binding 数 据 流向 的 属性 是 Mode， 它 的 类 型 是 BindingMode 枚 举 。 
BindingMode 可 取 值 为 TwoWay、 OneWay ` OnTime ` OneWayToSource 
和 Default。 这 里 的 Default 值 是 指 Binding 的 模式 会 根据 目标 的 实际 情况 
来 确定 ， 比 如 若是 可 编辑 的 (如 TextBox.Text 属 性 ) ，Default 就 采用 双 
向 模式 ;若是 只 读 的 〈 如 TextBlock.Text) 则 采用 单 向 模式 。 


接 上 一 小 节 的 例子 ， 当 我 们 拖 动 Slider 的 手柄 时 ，TextBox 里 就 会 显示 出 
Slider 当 前 的 值 (实际 上 这 里 面 涉 及 到 一 个 从 double 类 型 到 string 类 型 的 
转换 ， 暂 且 和 忽略 不 计 ) ; 如 果 我 们 在 TextBox 里 输入 一 个 恰当 的 值 ， 然 
后 按 一 下 Tab 键 、 让 焦点 离开 TextBox， 则 Slider 的 手柄 会 跳 到 相应 的 值 
那里 。 如 图 6-5 所 示 。 
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图 6-5 ”失去 焦点 后 Slider 的 值 根据 输入 而 变化 的 情况 


为 什么 一 定 要 在 TextBox 失 去 焦点 之 后 Slider 的 值 才 会 改变 呢 ? 这 就 引出 
了 Binding 的 另 一 个 属性 UpdateSourceTrigger ， 它 的 类 型 是 
UpdateSourceTrigger 枚 举 ， 可 取 值 为 PropertyChanged ^ LostFocus ^ 
Explicit 和 Default。 显 然 ， 对 于 TextBox 默 认 值 Default 的 行为 与 LostFocus 
一 致 ， 我 们 只 需要 把 这 个 属性 改 为 PropertyChanged， 则 Slider 的 手柄 束 
会 随 着 我 们 在 TextBox 里 的 输入 而 改变 位 置 。 


注意 


顺便 提 一 句 ，Binding 还 具有 NotifyOnSourceUpdated 和 NotifyOnTargetUpdated 两 个 pool 类 型 的 属 
性 。 如 果 设 为 rue， 则 当 源 或 目标 被 更 新 后 Binding 会 激发 相应 的 SourceUpdated 事件 和 
TargetUpdated 事 件 。 实 际 工 作 中 ， 我 们 可 以 通过 监听 这 两 个 事件 来 找 出 有 哪些 数据 或 控件 被 更 
新 了 。 


- 


6.3.3 Binding 的 路 径 (Path) 


作为 Binding 源 的 对 象 可 能 有 很 多 属性 ， 通 过 这 些 属性 Binding 源 可 以 把 
数据 暴露 给 外 界 。 那 么 ，Binding 到 底 需 要 关注 哪个 属性 的 值 呢 ? XXL 
需要 由 Binding 的 Path 属 性 来 指定 了 。 例 如 前 面 这 个 例子 ， 我 们 是 把 
Slider 控 件 对 象 当 作 源 、 把 它 的 Value 属性 作为 路 径 。 


尽管 在 XAML 代 码 中 或 者 Binding 类 的 构造 器 参数 列表 中 我 们 以 一 个 字 
符 串 来 表示 Path， 但 Path 的 实际 类 型 是 PropertyPath。 下 面 让 我 们 看 看 如 
何 创建 Path 来 应 对 各 种 情况 (我 将 使 用 XAML 和 C# 两 种 语言 描述 ) 。 


最 简 蛙 的 情况 束 古 直接 把 Binding 关 联 在 Binding 源 的 属性 上 ， 前 面 的 例 
于 束 是 这 样 。 语 法 如 下 : 


«TextBox x:Name7"textBox 1" Text- [Binding Pathz Value, ElementNameeslider1]" /> 
等 效 的 C# 代 码 是 : 


Binding binding = new Binding(){Path= new PropertyPath(" Value"), Source = this.sliderl }; 
this.textBox] .SetBinding(TextBox. TextProperty, binding); 


或 者 使 用 Binding 的 构造 器 简写 为 : 


Binding binding = new Binding(" Value") | Source = this.slider] j; 
this.textBox | .SetBinding( TextBox.TextProperty, binding); 


Binding 还 支持 多 级 路 径 〈 通 俗 地 讲 就 是 一 路 “点 ?下 去 ) 。 比 如 ， 如 果 
我 们 想 让 一 个 TextBox 显 示 另 外 一 个 TextBox 的 文本 长 度 ， 我 们 可 以 写 : 


<StackPanel> 
«TextBox x:Name-"textBox1" BorderBrush-"Black" Margin-"5" /> 
«TextBox x:Name-"textBox2" Text-" [Binding PathzText.Length, ElementName-textBox!, Mode-OneWay]" 
BorderBrush-"Black" Margin-"5" /> 
«/StackPanel^ 


等 效 的 C# 代 码 是 : 


this.textBox2.SetBinding(TextBox.TextProperty, new Binding("Text.Length") | Source = this.textBox1, Mode= 
BindingMode.OneWay] ); 
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ABCDEFGHUKLMNOPQRSTUVWXYZ 


图 6-6 一 个 TextBox 显 示 男 一 个 TextBox 的 文本 长 度 


我 们 知道 ， 集 合 类 型 的 索引 器 (Indexer) 又 称 为 带 参 属性 。 既 然 是 属 
性 ， 索 引 妖 也 能 作为 Path 来 使 用 。 比 如 我 想 让 一 个 TextBox 显 示 男 一 个 
TextBox 文 本 的 第 四 个 字符 ， 我 们 可 以 这 样 写 : 


<StackPanel> 
«TextBox x:Name="textBox1" BorderBrush-"Black" Margin-"5" /> 
«TextBox x:Name-"IextBox2" Text" [Binding PathzText.[3], ElementName-textBox!, Mode-OneWay]" 
BorderBrush-"Black" Margin-"5" /> 
«/StackPanel» 


等 效 的 C# 代 码 是 : 


this.textBox2.SetBinding(TextBox.TextProperty, new — Binding("Text[3]") { Source = this.textBoxl, Mode = 
BindingMode.OneWay 1); 


我 们 甚至 可 以 把 Text 与 [3] 之 间 的 那个 “.” 省 掉 ， 它 一 样 可 以 正确 工作 。 
运行 效果 如 图 6-7 所 示 。 
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图 6-7 ”索引 器 作为 Path 示 例 


当 使 用 一 个 集 fA ERF DataViewfE 7j Binding] ， 如 果 我 们 想 把 它 的 默 
认 元 素 当 作 Path 使 用 ， 则 需要 使 用 这 样 的 语法 : 


List<string> stringList = new List<string>() { "Tim", "Tom", "Blog" |; 

this.textBox 1. SetBinding( TextBox.TextProperty, new Binding("/") | Source = stringList }); 

this.textBox2.SetBinding( TextBox.TextProperty , new Binding("/Length") | Source = stringList, Mode = 
BindingMode.OneWay |); 

this.textBox3.SetBinding( TextBox. TextProperty, new Binding("/[2]") | Source = stringList, Mode = 
BindingMode.OneWay |); 


运行 的 效果 如 图 6-8 所 示 。 
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图 6-8 ”默认 元 素 作 为 Path 使 用 


如 果 集 合 元 素 的 属性 仍然 还 是 一 个 集合 ， 我 们 想 把 子 级 集合 中 的 元 素 
当 作 Path， 则 可 以 使 用 多 级 斜 线 的 语法 〈 即 一 路 “: MTE) ， 例 如 : 


Up 
class City 
i 


public string Name { get; set; } 


class Province 


i 
public string Name { get; set; } 
public List<City> CityList { get; set; } 


class Country 


| 
public string Name { get; set; } 
public List«Province» ProvinceList { get; set; } 


I| Binding 

List«Country» countryList = new List«Country» ( 入 初始 化 8/ V; 

this.textBox .SetBinding( TextBox. TextProperty, new Binding("/Name") | Source = countryList }); 
this.textBox2.SetBinding( TextBox. TextProperty, new Binding("/ProvinceList.Name") { Source = countryList ] ); 
this.textBox3.SetBinding( TextBox. TextProperty, new Binding("/Provinces/Cit yList.Name") | Source = countryList }); 


运行 效果 如 图 6-9 所 示 。 
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成 都 


图 6-9 子 级 集合 中 的 元 素 作 为 Path 


6.3.4 “没有 Path” 的 Binding 


有 的 时 候 我 们 会 在 代码 中 看 到 一 些 Path 是 一 个 “.” 或 者 干脆 没有 Path 的 
Binding， 着 实 让 人 摸 不 着 头脑 。 原 来 ， 这 是 一 种 比较 特殊 的 情况 
Binding 源 本 身 就 是 数据 且 不 需要 Path 来 指明 。 典 型 的 ，string、int 等 基 
本 类 型 就 是 这 样 ， 他 们 的 实例 本 号 就 是 数据 ， 我 们 无 法 指出 通过 它 的 
哪个 属性 来 访问 这 个 数据 ， 这 时 我 们 只 需 将 Path 的 值 设 置 为 “.”* 就 可 以 
了 。 在 XAML 代 码 里 这 个 “.” 可 以 省 上 略 不 写 ， 但 在 C# 代 码 里 却 不 能 省 
略 。 请 看 下 面 的 代码 : 


<StackPanel> 
<StackPanel,Resources> 
«sys:String x:Key-" myString"» 
ERAEN, MEMES. 
KREM, MERR. 
</sys:String> 
«/StackPanel. Resources 
<TextBlock x:Name-"textBlock 1" TextWrapping-" Wrap" 
Textz" [Binding Path=., Sourcez(StaticResource ResourceKey2myString]]" FontSize-" 16" 


Margin-"5" /> 
</StackPanel> 


运行 效果 如 图 6-10 所 示 。 


E- Binding Path 


明镜 亦 非 台 。 


何 处 惹 尘 埃 。 


Fde-10 ”实例 本 身 就 是 数据 源 示 例 


E ERARI nT DAR] 5 BOUE: 


Textz "(Binding ., Sourcez[StaticResource ResourceKey2myString] |" 


5k 


Textz" [Binding Sourcez(StaticResource ResourceKey2myString)]" 


注意 


N 


最 后 这 种 简写 方法 很 容易 被 误解 为 没有 指定 Path， 其 实 只 是 省 略 掉 了 。 与 之 等 效 的 C# 代 码 如 下 
(作为 Path 的 “.” 是 不 能 省 略 的 ) 。 


string myString=" 营 提 本 无 树 ， 明 镜 亦 非 台 。 本 来 无 一 物 ， 何 处 车 尘埃 。" 


this.textBlock1.SetBinding(TextBlock.TextProperty, new Binding("."){Source=myString }); 
注意 


最 后 顺便 提 一 句 ，PropertyPath 类 型 除了 用 于 Binding 的 Path 属 性 外 ， 在 动画 编程 的 时 候 也 会 派 
上 用 场 (Storyboard. TargetProperty) o 在 用 于 动画 编程 时 ，PropertyPath 还 有 男 外 的 语法 ， 到 时 
候 我 们 再 来 细 说 。 


6.3.5 ”为 Binding 指 定 源 (Source) 的 几 种 方法 


上 一 小 节 我 们 通过 学 习 Binding 的 Path 知 道 了 如 何在 一 个 对 象 映 上 寻找 
数据 。 这 一 小 节 我 们 来 学 习 如 何 为 Binding 指 是 Source 。 


Binding 的 源 是 数据 的 来 源 ， 所 以 ， 只 要 一 个 对 象 包 含 数据 并 能 通过 属 
性 把 数据 暴露 出 来 ， 它 就 能 当 作 Binding 的 源 来 使 用 。 包 含 数据 的 对 象 
比比 和 丝 是 ， 但 必须 为 Binding 的 Source 指 定 合适 的 对 象 Binding 才 能 正确 
工作 ， 常 见 的 办 法 有 : 


o 把 普通 CLR 类 型 单个 对 象 指 定 为 Source: 包括 .NET Framework El 7i 
类 型 的 对 象 和 用 户 目 定义 类 型 的 对 象 。 如 果 类 型 实现 了 
INotifyPropertyChanged 接口 ， 则 可 通过 在 属性 的 set 语 句 里 激发 
PropertyChanged 事 件 来 通知 Binding 数 据 已 被 更 新 。 


e 把 普通 CLR 人 集合 类 型 对 象 指定 为 Source: 包括 数组 、List<T> ` 
ObservableCollection<T> 等 集合 类 型 。 实 际 工作 中 ， 我 们 经 党 需要 把 一 


个 集合 作为 ItemsControl 派 生 类 的 数据 源 来 使 用 ， 一 般 是 把 控件 的 
ItemsSource 属 性 使 用 Binding 关 联 到 一 个 集合 对 象 上 。 


e 把 ADO.NET 数 据 对 象 指定 为 Source: 包括 DataTable 和 DataView 等 对 
象 o 


e 使 用 XmlDatapProvider 把 XML 数据 指定 为 Source: XML 作为 标准 的 
数据 存储 和 传输 格式 几乎 无 处 不 在 ， 我 们 可 以 用 它 表 示 单 个 数据 对 象 
或 者 集合 ; 一 些 WPF 探 件 是 级 联 式 的 〈 如 TreeView 和 Menu) ， 我 们 可 
以 把 树 状 结构 的 XML 数据 作为 源 指 定 给 与 之 关联 的 Binding ° 


e 把 依赖 对 象 (Dependency Object) 指定 为 Source: 依赖 对 象 不 仅 可 
以 作为 Binding 的 目标 ， 同 时 也 可 以 作为 Binding 的 源 。 这 样 就 有 可 能 形 
成 Binding 链 。 依 赖 对 象 中 的 依赖 属性 可 以 作为 Binding 的 Path ° 


e 把 容器 的 DataContext 指 定 为 Source (WPF Data Binding 的 默认 行 
为 ) : 有 时 候 我 们 会 遇 到 这 样 的 情况 一 一 我 们 明确 知道 将 从 哪个 属性 
获取 数据 ， 但 具体 把 哪个 对 象 作 为 Binding 源 还 不 能 确定 。 这 时 候 ， 我 
们 只 能 先 建立 一 个 Binding、 只 给 它 设 置 Path 而 不 设置 Source， 让 这 个 
Binding 自己 去 寻找 Source。 这 时 候 ，Binding 会 自动 把 控件 的 
DataContext 当 作 上 自己 的 Source 〈 它 会 治 着 控件 树 一 层 一 层 癌 外 找 ， 直 到 
找到 带 有 Path 指 定 属性 的 对 象 为 止 ) o 


e 通过 ElementName 指 定 Source: 在 C# 代 码 里 可 以 直接 把 对 象 作为 
Source 赋 值 给 Binding， 但 XAML 无 法 访问 对 象 ， 所 以 只 能 使 用 对 象 的 
Name 属 性 来 找到 对 象 。 


e 通过 Binding 的 RelativeSource 属 性 相对 地 指定 Source: 当 控 件 需 要 关 
iE 自己 的 、 目 己 容 器 的 或 者 和 目 己 内 部 元 素 的 某 个 值 就 需要 使 用 这 种 办 
ix o 

e ji ObjectDataProvider*] 2: 8 J Source: 当 数 据 源 的 数据 不 是 通过 
属性 而 是 通过 方法 暴露 给 外 界 的 时 候 ， 我 们 可 以 使 用 这 两 种 对 象 来 包 
少数 据 源 再 把 它们 指定 为 Source 。 

e 把 使 用 LINQ 检 索 得 到 的 数据 对 象 作 为 Binding 的 源 


下 面 我 们 束 通 过 实例 分 述 每 种 情况 。 


6.3.6 ”没有 Source 的 Binding 一 一 使 用 DataContext 作 为 Binding 
的 源 


前 面 的 例子 都 是 把 单个 CLR 类 型 对 象 指 定 为 Binding 的 Source， 方 法 有 
两 种 把 对 象 赋值 给 Binding.Source 属 性 或 把 对 象 的 Name 赋 值 给 
Binding.ElementName 。DataContext 属 性 被 定义 在 FrameworkElement 类 
里 ， 这 个 类 是 WPF 控 件 的 基 类 ， 这 意味 着 所 有 WPF 控 件 (包括 容器 控 
ft) 都 具备 这 个 属性 。 如 前 所 述 ，WPF 的 UI 布局 是 树 形 结构 ， 这 棵 树 
的 每 个 结 点 都 是 控件 ， 由 此 我 们 推出 男 一 个 结论 一 一 在 UI 元 素 树 的 每 
个 结 点 都 有 DataContext。 这 一 点 非常 重要 ， 因 为 当 一 个 Binding 只 知道 
自己 的 Path 而 不 知道 自己 的 Soruce 时 ， 它 会 沿 着 UI 元 素 树 一 路 向 树 的 根 
部 找 过 去 ， 每 路 过 一 个 结 点 束 要 看 看 这 个 结 点 的 DataContext 是 否 具有 
Path 所 指定 的 属性 。 如 果 有 ， 那 就 把 这 个 对 象 作为 自己 的 Source; 如 果 
没有 ， 那 就 继续 找 下 去 ; 如 果 到 了 树 的 根部 还 没有 找到 ， 那 这 个 
Binding 就 没有 Source， 因 而 也 不 会 得 到 数据 。 让 我 们 看 下 面 的 例子 : 


先 创 建 一 个 名 为 Student 的 类 ， 它 具有 Id、Name、Age 三 个 属性 : 


public class Student 

| 
public int Id | get; set; } 
public string Name | get; set; } 
public int Age { get; set; } 


1 
j 


然后 在 XAML 创 建 程序 的 UI。 


«Window x:Class-"WpfApplication]. Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:localz"clr-namespace: W pfA pplicationl" 

Title-"Binding Source" Height-" 135" Width-"300" 
«StackPanel Background-"LightBlue" 
«StackPanel.DataContext» 
«local:Student Idz "6" Agez"29" Namez"Tim" /> 
«/StackPanel.DataContext» 
«Grid» 
<StackPanel> 
<TextBox Textz" [Binding Path=Id}" Margin-"5" /> 
<TextBox Text="{Binding PathzName]" Margin-"5" /> 
<TextBox Text="{Binding Path=Age}" Margin-"5" /> 
</StackPanel> 
«IGrid» 
«JStackPanel» 


</Window> 


这 个 UI 的 布局 可 以 用 如 图 6-11 所 示 的 树 状 图 来 表示 : 


StackPanel 


DataContext 


Student | 


StackPanel 


图 6-11 UI 树 状 图 


TextBox TextBox 


使 用 xmlns:local="clr-namespace:WpfApplication1" ， 我 们 就 可 以 在 
b 中 使 用 上 面 在 C# 代 码 中 定义 的 Student 类 。 使 用 这 几 行 代 


<StackPanel.DataContext> 
<local:Student Id="6" Age="29" Name="Tim" /> 


</StackPanel,DataContext> 


束 为 外 层 StackPanel 有 的 DataContext 进 行 了 赋值 一 一 它 是 一 个 Student 对 
象 。 二 个 TextBox 的 Text 通 过 Binding 获 取 值 ， 但 只 为 Binding 指 定 了 
Path、 没 有 指定 Source。 简 写成 这 样 也 可 以 : 


«TextBox Textz" [Binding Id)" Margin-"5" /» 
«TextBox Textz" (Binding Name]" Margin-"5" /> 
«TextBox Textz" [Binding Age]" Margin-"5" /> 


这 样 ， 这 3 个 TextBox 的 Binding 台 会 目 动 回 UI 元 素 树 鸭 上 层 去 寻找 可 用 
的 DataContext 对 象 。 最 终 ， 它 们 在 最 外 层 的 StackPanel 映 上 找到 了 可 用 
的 DataContext 对 象 。 运 行 效果 如 图 6-12 所 示 。 


8 ' Binding Source 


图 6-12 没有 为 Binding 指 定 Source 时 的 运行 效果 


在 前 面 学 习 Binding 路 径 的 时 候 我 们 已 经 知道 ， 当 Binding 的 Source 本 喘 
瓯 是 数据 、 不 需要 使 用 属性 来 又 露 数据 时 ，Binding 的 Path 可 以 设置 
为 5”， 亦 可 以 省 略 不 写 。 现 在 Source 也 可 以 省 略 不 写 了 ， 这 样 ， 当 某 
个 DataContext 是 一 个 简单 类 型 对 象 的 时 候 ， 我 们 完全 可 能 看 到 一 个 “ 既 
没有 Path 又 没有 Source 的 ”Binding: 


«Window x:Class-"WpfApplicationl. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:sysz"clr-namespace:System;assemblyzmscorlib" 
FontSize-" 16" FontWeight-"Bold" 

Titlez"Binding Source" Height" 135" Width="300"> 
«StackPanel^ 
«StackPanel.DataContext» 
«sys:String» Hello DataContext!«/sys:String» 
«IStackPanel.DataContext» 
«Grid» 
«StackPanel^ 
<TextBlock Textz" (Binding)" Margin-"5" /> 
<TextBlock Textz" Binding)" Margin-"5" /> 
<TextBlock Textz" Binding)" Margin-"5" /> 
«/StackPanel^ 
</Grid> 
«/StackPanel^ 
</Window> 


运行 效果 如 图 6-13 所 示 。 


| ' Binding Source 


Hello DataContext! 
Hello DataContext! 
Hello DataContext! 


图 6-13 ”没有 指定 Path 和 Source 时 的 运行 效果 


你 可 能 会 想 ，Binding 是 怎样 目 动 癌 UI 元 素 树 的 上 层 寻 找 DataContext 对 
象 并 把 它 作 为 Source 的 呢 ? 其 实 , “Binding 沿 着 UI 元 素 树 向 上 找 ” 只 是 
WPF 给 我 们 的 一 个 错觉 ，Binding 并 没有 那么 智能 。 之 所 以 会 有 这 种 殖 
果 是 因为 DataContext 是 一 个 “依赖 属性 ”( 后 面 章节 会 详细 讲述 ) ， 依 
赖 属 性 有 一 个 很 重要 的 特点 束 是 当 你 没有 为 控件 的 某 个 依赖 属性 显 式 
赋值 时 ， 探 件 会 把 目 己 容 需 的 属性 值 * 借 过 来 ? 当 作 目 己 的 属性 值 。 实 
际 上 是 属性 值 沿 着 UI 元 素 树 问 下 传递 了 。 这 里 有 个 简单 的 小 例子 ， 程 
序 的 UI 部 分 是 若干 层 Grid， 最 内 层 Grid 里 放置 了 一 个 Button， 我 们 为 最 
外 层 的 Grid 设 置 了 DataContext 属 性 值 ， 因 为 内 层 的 Grid 和 Button 都 没有 
设置 DataContext 属 性 值 所 以 最 外 层 Grid 的 DataContext 属 性 值 会 一 直 传 
递 到 Button 那 里 ， 单 击 Button 就 会 显示 这 个 值 。 


程序 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-" DataContext" 
Height-"120" Width-"240"» 

«Grid DataContextz"6"» 
«Grid» 
«Grid» 
«Grid» 
«Button x:Name-"btn" Content-"OK" Click-"btn Click" /> 
</Grid> 
</Grid> 
«/Grid» 
</Grid> 


</Window> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void btn Click(object sender, RoutedEventArgs e) 


i 
MessageBox.Show(btn.DataContext. ToString()); 


1 
Í 


运行 效果 如 图 6-14 所 示 。 


8 ' DataContext 


图 6-14 “属性 值 沿 UI 元 素 树 向 下 传递 
在 实际 工作 中 DataContext 的 用 法 是 非常 灵活 的 。 比 如 : 
(1) 当 UI 上 的 多 个 控件 都 使 用 Binding 关 注 同一 个 对 象 时 ， 不 妨 使 用 


DataContext ° 


(2) 当 作 为 Source 的 对 象 不 能 被 直接 访问 的 时 候 一 一 比如 B 窗 体内 的 
控件 想 把 A 窗 体 内 的 控件 当 作 自己 的 Binding 源 时 ,但 A 窗 体 内 的 控件 是 
private 访 问 级 别 ， 这 时 候 就 可 以 把 这 个 控件 (或 者 控件 的 值 ， 作 为 窗 体 
A 的 DataContext (这 个 属性 是 public 访 问 级 别 的 ) 从 而 暴露 数据 。 


形象 地 说 ， 这 时 候 外 层 容 器 的 DataContext 就 相当 于 一 个 数据 的 “ 制 高 
点 ”， 只 要 把 数据 放 上 去 ， 别 的 元 素 束 都 能 看 见 。 男 外 ，DataContext 本 
R 我 们 可 以 使 用 Binding 把 它 关 联 到 一 个 数据 源 


6.3.7 ”使 用 集合 对 象 作为 列表 控件 的 ItemsSource 


有 了 DataContext 的 知识 作 基 础 ， 我 们 再 来 看 看 把 集合 类 型 对 象 作为 
Binding 源 的 情况 。 


WPF 中 的 列表 式 控 件 们 派生 自 ItemsControl 类 ， 自 然 也 束 继 承 了 
ItemsSource 这 个 属性 。ItemsSource 属 性 可 以 接收 一 个 IEnumerable 接 口 
派生 类 的 实例 作为 自己 的 值 (所 有 可 被 迭代 遍历 的 集合 都 实现 了 这 个 
接口 ， 包 括 数 组 、List<T> 等 ) 。 每 个 ItemsControl 的 派生 类 都 具有 自己 
对 应 的 条 目 容 器 (Item Container) ， 例 如 ，ListBox 的 条 目 容 器 是 
ListBoxItem ^ ComboBox H] % H 7t 8$ Æ ComboBoxlItem ° ItemsSource 里 
存放 的 是 一 条 一 条 的 数据 ， 要 想 把 数据 显示 出 来 需要 为 它们 穿 上 “外 
衣 ”， 条 目 容 怖 了 驶 起 到 数据 外 衣 的 作用 。 怎 样 让 每 件数 据 外 衣 与 它 对 应 
的 数据 条 目 关 联 起 来 呢 ? 当然 是 依靠 Binding! 只 要 我 们 为 一 个 
ItemsControl 对 象 设置 了 ItemsSource 属 性 值 ，ItemsControl 对 象 束 会 自动 
迭代 其 中 的 数据 元 素 、 为 每 个 数据 元 素 准 备 一 个 条 目 容 右 ， 并 使 用 
20d 目 容 器 与 数据 元 素 之 间 建 立 起 关联 。 让 我 们 看 这 样 一 个 例 


它 的 UI 代码 如 下 : 


«Window x:Class-"WpfApplication] Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Binding Source" Height-"240" Width-"300" 

«StackPanel x: Name-"stackPanel" Background-"LightBlue" 
<TextBlock Text-"Student ID:" FontWeight-"Bold" Margin-"5" /> 
«TextBox x:Name-"textBoxId" Margin-"5" /> 
<TextBlock Text-"Student List:" FontWeight-"Bold" Margin-"5" /> 
«ListBox x:Name-"listBoxStudents" Height-"1 10" Margin" 5" /> 

«/StackPanel» 


«Window» 


效果 如 图 6-15 所 示 。 


8 ' Binding Source 


图 6-15 ”UI 效果 


我 们 要 实现 的 效果 是 把 一 个 List<Student> 集 合 的 实例 作为 ListBox 的 
ItemsSource， 让 ListBox 显 示 Student 的 Name 并 使 用 TextBox 显 示 ListBox 
当前 选中 条 目的 Id。 为 了 实现 这 样 的 功能 ， 我 们 需要 在 Window1 的 构造 
88 TF 5 J LITRI: 


public Window! () 
| 


InitializeComponent(); 


IL 准备 数据 源 

List<Student> stuList = new List<Student>() 

| 
new Student(){Id=0, Name="Tim", Age=29}, 
new Student(){Id=1, Name="Tom", Age-28], 
new Student(){Id=2, Name="Kyle", Age-27], 
new Student(){1d=3, Name-"Tony", Age-26], 
new Student(){Id=4, Name-" Vina", Age-25], 

new Student()|Id-5, Name-"Mike", Age-24], 


I| 为 ListBox V B. Binding 
this.listBoxStudents.ItemsSource  stuList; 
this.listBoxStudents.DisplayMemberPath = "Name"; 


儿 为 TextBox 设置 Binding 


Binding binding = new Binding("Selectedltem.Id") | Source = this.listBoxStudents } 
this.textBoxld.SetBinding(TextBox.TextProperty, binding); 


运行 的 效果 如 图 6-16 所 示 。 


B` Binding Source 


图 6-16 ”运行 效果 


你 可 能 会 想 : 这 个 例子 里 并 没有 看 到 你 刚才 说 的 Binding。 实 际 

de. *this.listBoxStudents.DisplayMemberPath-"Name";" iX 4] 代码 还 是 露 

出 了 一 些 蛛 丝 马 迹 。 注 意 到 它 包 含 “Path” 这 个 单词 了 吗 ? 这 说 明 它 是 一 

^^ FK f$ » 5 DisplayMemberPath 属性 被 赋值 后 ，ListBox 在 获得 

ItemsSource 的 时 候 就 会 创建 等 量 的 ListBoxItem 并 以 DisplayMemberPath 

属性 值 为 Path 创 建 Binding，Binding 的 目标 是 ListBoxItem 的 内 容 插件 
(实际 上 是 一 个 TextBox， 下 面 就 会 看 到 ) 。 


如 果 在 ItemsControl 类 的 代码 里 刨 根 问 底 ， 你 会 发 现 这 个 创建 Binding 的 
过 程 是 在 DisplayMemberTemplateSelector 类 的 SelectTemplate 方 法 里 完成 
的 。 这 个 方法 的 定义 格式 如 下 : 


public override DataTemplate SelectTemplate(object item, DependencyObject container) 
i 

I ERIS... 
} 


在 这 里 我 们 倒 不 必 关 心 它 的 完整 内 容 ， 注 意 到 它 的 返回 值 了 吗 ? 是 

个 DataTemplate 类 型 的 值 。 数 据 的 “多 Vest LJE i DatsTemplatesE Ea] ! 
当 我 们 没有 为 ItemsControl 显 式 地 指定 DataTemplate 时 Select Template 77 
法 就 会 为 我 们 创建 一 个 默认 的 (也 是 最 简单 的 ) DataTemplate 就 好 
像 给 数据 穿 上 一 件 最 简单 的 衣服 一 样 。 至 于 什么 是 DataTemplate 以 及 这 
个 方法 的 完整 代码 将 会 放 到 与 Template 相 关 的 章节 去 仔细 讨论 ， 这 里 
我 们 只 关心 SelectTemplate 内 部 与 创建 Binding 相 关 的 几 行 代码 : 


FrameworkElementFactory text = ContentPresenter.Create TextBlockFactory(); 
Binding binding = new Binding(); 

binding.Path = new PropertyPath( display MemberPath); 
binding.StringFormat = stringFormat; 
text.SetBinding( TextBlock. TextProperty, binding); 


注意 


这 里 只 对 新 | 建 的 Binding 没 害 了 Path 而 没有 为 它 指定 Source， 紧 接着 就 把 它 关 联 到 T TextBlock 
控件 上 。 显 然 ， 要 想得到 Source ， 这 个 Binding 要 向 UI 元 素 树 根 的 方向 去 寻找 包含 
_displayMemberPath 指 定 属 性 的 DataContext 。 


最 后 ， 我 们 再 看 一 个 显 式 地 为 数据 设置 DataTemplate 的 例子 。 先 把 C# 代 
码 中 的 “this.listBoxStudents.DisplayMemberPath="Name"; 一 句 删 除 ， 再 
在 XAML 中 添加 几 行 代码 ，ListBox 的 ItemTemplate 属 性 (继承 自 
ItemsControl 类 ) 的 类 型 是 DataTemplate ， 下 面 的 代码 就 是 我 们 为 
Student 类 型 实例 “ 量 喘 定做 ”衣服 : 


«Window x:Class-"WpfApplicationl. Window] " 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-"Binding Source" Height-"240" Width-"300" Loaded-" Window Loaded" 
«StackPanel x:Name-"stackPanel" Background" LightBlue"» 
<TextBlock Text-"Student ID:" FontWeight-"Bold" Margin" 5" /> 
«TextBox x:Name-"textBoxld" Margin-"5" /> 
<TextBlock Text-"Student List:" FontWeight-"Bold" Margin-"5" > 
«ListBox x:Name-"listBoxStudents" Height-"110" Margin-" 5" 
«ListBox.ItemTemplate» 
«DataTemplate» 
«StackPanel Orientationz"Horizontal"» 
<TextBlock Textz" [Binding PathzId)" Widthz"30" /> 
<TextBlock Textz" [Binding PathzName]" Widthz"60" /> 
<TextBlock Textz" [Binding Path=Age}" Widthz"30" /> 
</StackPanel> 
</DataTemplate> 
</ListBox.ItemTemplate> 
</ListBox> 
</StackPanel> 


</Window> 


运行 效 末 如 图 6-17 所 示 。 


B` Binding Source 


图 6-17 显示 为 数据 设置 DataTemplate 实 例 效果 图 
注意 


后 特别 提醒 大 家 一 点 : 在 使 用 集合 类 型 作为 列表 控件 的 ItemsSource 时 一 般 会 考虑 使 用 
ObservableCollection<T> 代 *t List<T> , 因 为 ObservableCollection<T> 类 实现 了 
INotifyCollectionChanged 和 INotifyPropertyChanged 接 口 ， 能 把 集合 的 变化 立刻 通知 显示 它 的 列 
表 控 件 ， 改 变 会 立刻 显现 出 来 。 


63.8 ”使 用 ADO.NET 对 象 作 为 Binding 的 源 


在 .NET 开 发 中 ， 我 们 使 用 ADO.NET 类 对 数据 库 进 行 操 作 。 常 见 的 工作 
是 从 数据 库 中 把 数据 读 取 到 DataTable 中 , 再 把 DataTable 显 示 在 UI 列 表 
控件 里 《如 成 绩 单 、 博 客 文章 列表 、 论 坛 帖 子 列表 等 ) 。 尽 管 在 流行 
的 软件 架 e 构 中 并 不 把 DataTsble 的 数据 直接 显示 在 UI 列 宕 控件 蜂 而 是 先 
通过 LINQ 等 手段 把 DataTable 里 的 数据 转换 成 恰当 的 用 户 自 定义 类 型 集 
合 ， 但 WPF 也 支持 在 列表 控件 与 DataTable 之 间 直 接 建立 Binding ° 


T 已 经 获得 了 一 个 DataTable 的 实例 ， 并 且 它 的 数据 内 容 如 表 6-1 
ZR œ 


a 


表 6-1 一 个 DataTable 实 例 的 数据 内 容 
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现在 我 们 把 它 显 示 在 一 个 ListBox 里 。UI 部 分 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication]. Window1" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-"DataTable Source" Height-"206" Width-"250"» 
«StackPanel Background" LightBlue"» 

«ListBox x:Name-"listBoxStudents" Height-" 130" Margin-"5" /> 

«Button Content-"Load" Height-"25" Margin-"5,0" Click-"Button Click" /> 
</StackPanel> 

</Window> 


C# 部 分 我 们 只 给 出 Button 的 Click 事 件 处 理 器 : 


private void Button Click(object sender, RoutedEventArgs e) 


{ 
IL 获取 DataTable 实例 
DataTable dt = this.Load(); 


this.listBoxStudents.DisplayMemberPath = "Name"; 
this.listBoxStudents.ItemsSource = dt.DefaultView; 


运行 效果 如 图 6-18 所 示 。 


8 ' DataTable Source 


图 6-18 ”运行 效果 


其 中 最 重 要 的 Es AJ A f 
XE Cthis.listBoxStudents.ItemsSource-dt.DefaultView;"^ ° DataTable 的 
DefaultView 属 性 是 一 个 DataView 类 型 的 对 象 ，DataView 类 实现 了 
IEnumerable 接 口 ， 所 以 可 以 被 赋值 给 ListBox.ItemsSource 属 性 。 


多 数 情 况 下 我 们 会 选择 ListView 控 件 来 显示 一 个 DataTable， 需 要 做 的 改 
动 也 不 是 很 大 。XAML 部 分 的 代码 如 下 : 


«Window x:Class-"WpfApplication] Window" 


xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation 


xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 


Title-"DataTable Source" Height-"206" Width-"250"» 
«StackPanel Background-"LightBlue"» 
«ListView x:Name-"listViewStudents" Height-"] 30" Margin-"5"» 


«ListView. View» 
«GridView» 


«Grid ViewColumn Headerz" Id" Widthz "60" 


DisplayMemberBinding-" (Binding Id)" /> 


«GridViewColumn Headerz" Name" Widthz"80" 


DisplayMemberBindingz" (Binding Name]" /> 


«GridViewColumn Headerz" Age" Widthz"60" 


«iListView? 
«Button Content-"Load" Height-"25" Margin" 5,0" Click-"Button Click" /> 
</StackPanel> 


</Window> 


BE 
et 
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先 ， 从 字面 


ELA ds: 


的 对 
使 用 


注意 的 地 方 : 


组 合 模式 ， 即 ListView“ 有 一 


型 的 View 则 


程序 员 


上 理解 ListView 和 GridView 应 该 是 


DisplayMemberBindingz" [Binding Age" /> 
</GridView> 
</ListView, View> 


] 选择 


H 


其 次 ，GirdView 的 
XAML 文 持 对 内 容 属 


, H 
重要 的 一 个 属 
列 使 用 什么 


DisplayMemberPath 属 性 


为 容 属 


性 是 Columns， 


这 个 


HX AI 


2 


s 


(类 型 为 string) 


。 如 


同一 级 别 的 控件 ， 实 际 上 远 非 这 样 
是 ListBox 的 派生 类 而 GridView 是 ViewBase 的 派生 类 ，ListView 的 View 属 性 是 一 个 ViewBase 类 型 
所 以 ，GridView 可 以 作为 ListView 的 View 来 使 
个 ”View， 至 
目前 只 有 一 个 GridView 可 用 ， 


属性 是 GridViewColumnCollection 类 型 对 象 。 

性 的 简写 ， 所 ! ei E T «GridView.Columns»...«/GridView.Columns» iX 
接 在 <GridView> 的 内 容 部 分 
性 是 "DisplayMembecBinding 
样 的 Binding 7 大 


! ListView 


于 这 个 View 是 GridView 还 是 


而 不 能 当 作 独 立 的 控件 来 使 用 。 这 里 
其 他 什么 类 
里 还 会 有 扩展 。 


估计 微软 在 这 


因为 
EUR 


T =^ GridViewColumn*;] $$ ° GridViewColumn*;] $2 3g 
(类 型 为 BindingBase) , 
这 与 ListBox 有 ， 点 不 


使 用 这 个 属性 可 以 指定 这 一 
同 ListBox 使 用 的 是 


LAB 


JER 


杂 的 结构 来 表示 这 一 列 的 标题 


(Header) 或 数据 ， 则 可 为 GridViewColumn 设 置 HeaderTemplate 和 CellTemplate 属 性 ， 它 们 的 类 
型 都 是 DataTemplate ° 


C# 代 码 中 ，Button 的 Click 事 件 处 理 器 基本 上 没有 变化 : 


private void Button. Click(object sender, RoutedEventArgs e) 


{ 
J| 获取 DataTable 实例 


DataTable dt = this.Load(); 


this.listViewStudents.ItemsSource = dt.DefaultView; 
} 


运行 效果 如 图 6-19 所 示 。 


图 6-19 ”运行 效果 


通过 上 面 的 例子 我 们 已 经 知道 DataTable 对 象 的 DefaultView 属 性 可 以 作 
为 ItemsSource 使 用 。 拿 DataTable 直 接 作 为 ItemsSource 可 以 吗 ? 如 果 把 
代码 改 成 这 样 : 


private void Button. Click(object sender, RoutedEventArgs e) 


| 
1 


|| 获取 DataTable 实例 
DataTable dt = this.Load(); 


this.list ViewStudents.ItemsSource = dt; 


会 得 到 一 个 编译 错误 : 


Cannot implicitly convert type '"System.Data.DataTable' to 'System.Collections.IEnumerable', An explicit conversion exists 
(are you missing a cast?) 


TIA, DataTable ^ BE E 2 £ 2€ H ItemsSource IRIE » xk, MR 
DataTable 对 象 放 在 一 个 对 象 的 DataContext 属 性 里 ， 并 把 ItemsSource 与 
一 个 既 没 有 指定 Source 又 没有 指定 Path 的 Binding 天 联 起 来 时 ，Binding 
却 能 自动 找到 它 的 DefaultView 并 当 作 自己 的 Source 来 使 用 : 


private void Button. Click(object sender, RoutedEventArgs e) 


省 获取 DataTable 实例 
DataTable dt = this.Load(); 


this.list ViewStudents.DataContext = dt; 
this.listViewStudents.SetBinding(ListView.ItemsSourceProperty, new Binding() ; 


所 以 ， 如 果 你 在 代码 中 发 现 把 DataTable 而 不 是 DefaultView 作为 
DataContext 的 值 ， 并 且 为 IlemsSource 设 置 一 个 既 无 Path 又 无 Source 的 
Binding 时 ， 千 万 别 感觉 迷惑 。 


6.39 ”使 用 XML 数据 作为 Binding 的 源 
迄今 为 止 ，.NET Framework 提 供 了 两 套 处理 XML 数 据 的 类 库 : 


e 符合 DOM (Document Object Modle， 文 档 对 象 模型 ) 标准 的 类 库 : 
包括 XmlDocument、 XmlElement ` XmlNode ` XmlAttribute5$ Ñ » AE 
ASIE RE HALRA ^ ZJBRSHOK, THdRBÍOIIXZXMLBIJfeZUN E 


FR 


e 以 LINQ (Language-Integrated Query， 语 言 集成 查询 ) 为 基础 的 类 
E: 包括 XDocument、 XElement ^ XNode ^ XAttributeS$ ¥ ° AEX JE 
的 特点 是 可 以 使 用 LINQ 进 行 查询 和 操作 ， 方 便 快 捷 。 


本 小 节 我 们 主要 讲解 基于 DOM 标 准 的 XML 类 库 ， 基 于 LINQ 的 部 分 我 
们 放 在 接 下 来 的 一 节 里 讨论 。 


现代 程序 设计 只 要 涉及 数据 传输 就 离 不 开 XML， 因 为 大 多 数 数据 传输 
都 基于 SOAP (Simple Object Access Protocol， 简 单 对 象 访问 协议 ) 相 
天 的 协议 ， 而 SOAP 又 是 通过 将 对 象 序列 化 为 XML 文 本 进行 传输 。 
XML 文本 是 树 形 结构 的 ， 所 以 XML 可 以 方便 地 用 于 表示 线性 集合 (如 
Array、List 等 ) 和 树 形 结构 数据 。 


需要 注意 的 是 ， 当 使 用 XML 数据 作为 Binding 的 Source 时 我 们 将 使 用 XPath 属性 而 不 是 Path 属 性 
2 数据 的 来 源 o 
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先 来 看 一 个 线性 集合 的 例子 。 下 面 的 XML 文本 是 一 组 学 生 的 信息 UE 
设 存放 在 D:\RawData.xml 文 件 中 ) ， 我 要 把 它 显 示 在 一 个 ListView 控 件 
里 . 


程序 的 XAML 部 分 如 下 : 


«Window x:Class-"WpfApplication]. Window1" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" XML Source" Height-"205" Width-"240"» 
«StackPanel Background-"LightBlue"» 
«ListView x:Name-"listViewStudents" Height-" 130" Margin-" 5" 
<ListView. View» 
«GridView? 
«GridViewColumn Header-"Id" Width-"80" 
DisplayMemberBindingz" [Binding XPathz Id)" /> 
«GridViewColumn Header-" Name" Width-" 120" 
DisplayMemberBindingz" Binding XPathzName]" /> 
</GridView> 
«/ListView. View? 
<ListVieW> 
«Button Content-"Load" Click-"Button Click" Height-"25" Margin-"5,0" /> 
</StackPanel> 
</Window> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 


XmlDocument doc = new XmlDocument(); 
doc.Load(@"D:\RawData.xml"); 


XmlDataProvider xdp = new XmlDataProvider(); 
xdp.Document = doc; 


JI 使 用 XPath 选择 需要 暴露 的 数据 
J| 现在 是 需要 暴露 一 组 Student 
xdp.XPath = (2"/StudentLisUStudent"; 


this.listViewStudents.DataContext = xdp; 
this.listViewStudents.SetBinding(ListView.ItemsSourceProperty, new Binding()); 


程序 运行 效果 如 图 6-20 所 示 。 


E` XML Source 


图 6-20 ”运行 效果 


XmlDataProvideri4 8 — 4 4 N Sourceh gg TE, HT AH E E PERAEXML 
文档 所 在 的 位 置 (无 论 XML 文 档 存 储 在 本 地 硬盘 还 是 网 络 上 ) ， 所 
DA, Click FEAR gs tH n] DIEI BESUCHE: 


private void Button. Click(object sender, RoutedEventArgs c) 


f 
1 


XmlDataProvider xdp = new XmlDataProvider(); 
xdp.Source = new Uri(  "DARawData.xml"); 
xdp.XPath = (a /StudentList/Student"; 


this.listViewStudents.DataContext = xdp; 
this.listViewStudents.SetBinding(ListView.ItemsSourceProperty, new Binding()); 


l 
j 


XAML 代码 中 最 关键 两 句 是 “DisplayMemberBinding="{Binding 
XPath=@Id}";” 和 “DisplayMemberBinding="{Binding XPath-Name]";" , 
它们 分 别 为 GridView 的 两 列 指明 了 关注 的 XML 路 径 一 一 很 明显 ， 使 用 
@ 符 号 加 字符 串 表 示 的 是 XML 元 素 的 Attribute， 不 加 @ 符 号 的 字符 串 表 
示 的 是 子 级 元 素 。 


XPath 作为 XML 语言 的 功能 有 着 一 整套 语法 ， 讲 述 这 些 语 法 走出 了 本 书 
的 范围 。MSDN 里 有 对 XPath 很 详尽 的 讲解 可 以 查阅 。 


XML 语言 可 以 方便 地 表示 树 形 数据 结构 ， 下 面 的 例子 是 使 用 TreeView 
控件 来 显示 拥有 者 干 层 目录 的 文件 系统 ， 而 且 ， 这 次 是 把 XML 数据 和 
XmlDataProvider 对 象 直接 写 在 XAML 代码 里 。 人 代码 中 用 到 了 
HierarchicalDataTemplate 类 ， 这 个 类 具有 名 为 ItemsSource 的 属性 ， 可 见 
由 这 种 Template 展 示 的 数据 是 可 以 拥有 子 级 集合 的 。 代 码 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"XML Source" Height-"2 10" Width-"260"» 

«Window.Resources 
«XmlDataProvider x:Key-"xdp" XPathz"FileSystem/Folder" > 
«x:XData» 
«FileSystem xmlns=""> 
«Folder Name= "BookS"> 
«Folder Name-"Programming"» 
«Folder Name-"Windows"» 
«Folder Name-"WPF" /> 
«Folder Name-"MFC" > 
«Folder Name-"Delphi" /> 
</Folder> 
</Folder> 
«Folder Name="Tools"> 
«Folder Name="Development" /> 
<Folder Name="Designment" /> 
<Folder Name="Players" /> 
</Folder> 
</Folder> 
</FileSystem> 
«Ix:XData» 
«/XmlDataProvider» 
«/Window.Resources» 


«Grid» 
«TreeView ItemsSourcez" (Binding Source-(StaticResource xdp]] "7 
«TreeView.ItemTemplate? 
«HierarchicalDataTemplate ItemsSourcez" [Binding XPath=Folder}"> 
<TextBlock Textz" (Binding XPathz? Name]" /> 
«[HierarchicalDataTemplate» 
«/TreeView.ItemTemplate? 
«/TreeView» 
</Grid> 
</Window> 


注意 


需要 注意 的 是 ， 如 果 把 XmlDataProvider 直 接 写 在 XAML 代 码 里 ， 那 么 它 的 XML 数据 需要 放 在 
<x:XData>...</x:XData> 标 签 里 。 


由 于 这 个 例子 涉及 的 StaticResource 和 HierarchicalDataTemplate， 都 是 后 
面 的 内 容 ， 所 以 相对 比较 难 习 ， 等 学 习 完 后 面 的 Resource 和 Template 相 
天 章节 再 回来 看 便 会 了 然 于 胸 。 


程序 运行 效果 如 图 6-21 所 示 。 
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图 6-21 ”运行 效果 
6.3.10 ”使 用 LINQ 检 索 结 果 作 为 Binding 的 源 


自 3.0 版 开始 ，.NET Framework 开 始 支 持 LINQ (Language-Integrated 
Query， 语 言 集成 查询 ) ， 使 用 LINQ， 我 们 可 以 方便 地 操作 集合 对 
Z ^ DataTable R MXML R Tf] 44 2J] SUSCI f) LE foreach 8 ES ES 
在 一 起 却 只 是 为 了 完成 一 个 很 简单 的 任务 。 


LINQ 查 询 的 结果 是 一 个 IEnumerable<T> 类 型 对 象 ， 而 IEnumerable<T> 


~ JK^E B IEnumerable, ， 所 以 它 可 以 作为 列表 控件 的 ItemsSource 来 使 


我 创建 了 一 个 名 为 Student 的 类 : 


public class Student 

| 
public int Id | get; set; } 
public string Name | get; set; } 
public int Age | get; set; } 


1 
j 
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«Window x:Class-"WpfApplication]. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" LINQ Source" Height-"220" Width-"280"» 
«StackPanel Background-"LightBlue"» 
«ListView x:Name-"listViewStudents" Height-"] 43" Margin-"5"» 
«ListView. View? 
«GridView? 
«GridViewColumn Header-"Id" Width-"60" 
DisplayMemberBinding-" [Binding Id)" /> 
«Grid ViewColumn Header-"Name" Width-" 100" 
DisplayMemberBinding-" {Binding Name]" /> 
«GridViewColumn Header-" Age" Width-"80" 
DisplayMemberBinding-" {Binding Agej" /> 
</GridView> 
«/ListView, View? 
<IListView> 
«Button Content="Load" Height="25" Margin="$,0" Click="Button Click" /> 
</StackPanel> 
</Window> 


先 来 看 查询 集合 对 象 。 要 从 一 个 已 经 填充 好 的 List<Student> 对 象 中 检索 
出 所 有 名 字 以 字母 T 开 头 的 学 生 ， 代 码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 
i 
List<Student> stuList = new List<Student>() 
i 
new Student(){Id=0, Name="Tim", Age=29}, 
new Student(){Id=1, Name="Tom", Age=28}, 
new Student(){Id=2, Name="Kyle", Age=27}, 
new Student(){Id=3, Name="Tony", Age=26}, 
new Student(){1d=4, Name="Vina", Age=25}, 
new Student(){1d=5, Name="Mike", Age=24}, 


this.listViewStudents.ItemsSource = from stu in stuList where stu.Name,StartsWith("T") select stu; 


如 果 数 据 存放 在 一 个 已 经 填充 好 的 DataTable 对 象 里 ， 则 代码 是 这 样 : 


private void Button. Click(object sender, RoutedEventArgs e) 


i 
DataTable dt = this.GetDataTable(); 


this.listViewStudents, ItemsSource = 
from row in dt.Rows.Cast«DataRow»() 
where Convert. ToString(row[ "Name" ]).StartsWith("T") 
select new Student) 
{ 
Id = int.Parse(row["Id"].ToString()), 
Name = row["Name"].ToString(), 
Age = int.Parse(row["Age"].ToString()) 


如 果 数 据 存储 在 XML 文件 里 (D:\RawData.xml) 如 下 : 


<?xml version-" 0" encoding-"utf-8" ?> 
«StudentList? 
«Class? 
«Student Id-"0" Name-"Tim" Age="29"/> 
«Student Id-"]" Name-"Tom" Age-"28"/» 
«Student Id-"2" Name-"Mess" Age-"27"/» 
«[Class? 
«Class? 
«Student Id-"3" Name-"Tony" Age-"26"/» 
«Student Id-"4" Name-" Vina" Age-"25"/» 
«Student Id-" 5" Name-"Emily" Age-"24"/» 
</Class> 
</StudentList> 


则 代码 会 是 这 样 (EXÉxdoc.Descendants("Student')ix T 7; 1E, €a AS 
越 XML 的 层级 ) : 


private void Button Click(object sender, RoutedEVentArgs e) 
| 


XDocument xdoc = XDocument.Load(@"D:\RawData.xm]"); 


this.listViewStudents.ItemsSource = 
from element in xdoc.Descendants("Student") 
where element.Attribute( "Name" ).Value.StartsWith(" T") 
select new Student() 
{ 
Id = int.Parse(element.Attribute("Id").Value), 
Name = element.Attribute("Name"), Value, 
Age = int.Parse(element,Attribute("Age").Value) 


程序 的 运行 效果 如 图 6-22 所 示 。 


图 6-22 ”运行 效果 
6.3.11 ”使 用 ObjectDataProvider 对 象 作为 Binding 的 Source 


理想 的 情况 下 ， 上 游程 序 员 把 类 设计 好 、 使 用 属性 把 数据 暴露 出 来 ， 
下 游程 序 员 把 这 些 类 的 实例 作为 Binding 的 Source、 把 属性 作为 Binding 
的 Path 来 消费 这 些 类 。 但 很 难保 证 一 个 类 的 所 有 数据 都 使 用 属性 暴露 出 
来 ， 比 如 我 们 需要 的 数据 可 能 是 方法 的 返回 值 。 而 重新 设计 底层 类 的 
风险 和 成 本 会 比较 高 ， 况 且 黑 盒 引 用 类 库 的 情况 下 我 们 也 不 可 能 更 改 
已 经 编译 好 的 类 ， 这 时 候 就 需要 使 用 ObjectDataProvider 来 包装 作为 
Binding 源 的 数据 对 象 了 。 

ObjectDataProvider， 顾 名 思 义 就 是 把 对 象 作 为 数据 源 提供 给 Binding ° 
前 面 还 提 到 过 XmlDataProvider， 也 束 是 把 XML 数据 作为 数据 源 提 供给 
Binding。 这 两 个 类 的 父 类 都 是 DataSourceProvider 抽 象 类 。 


现在 有 一 个 名 为 Calculator 的 类 ， 它 具有 计算 加 、 减 、 乘 、 除 的 方法 : 


class Calculator 


| 
1 


I 加 法 
public string Add(string argl, string arg2) 
i 
double x 0; 
double y 0; 
double z = 0; 
if (double. TryParse(argl, out x) && double. TryParse(arg2, out y)) 
| 
Z=x+y; 
return z.ToString(); 
| 


return "Input Error!"; 
I| 其 他 算法 


我 们 先 写 一 个 非常 简单 的 小 例 季 来 了 解 ObjectDataProvider 类 。 随便 新 
建 一 个 WPF 项 目 ， 然 后 在 UI 里 添加 一 个 Button，Button 的 Click 事 件 处 理 
arul T: 


private void Button. Click(object sender, RoutedEventArgs e) 
| 
ObjectDataProvider odp = new ObjectDataProvider(); 
odp.ObjectInstance = new Calculator(); 
odp.MethodName = "Add"; 
odp.MethodParameters.Add("100"); 
odp.MethodParameters. Add("200"); 


MessageBox.Show(odp.Data. ToString()); 


运行 程序 、 单 击 Button， 效 果 如 图 6-23 所 示 。 


图 6-23 ”运行 效果 


通过 这 个 程序 我 们 可 以 了 解 到 ObjectDataProvider 对 象 与 被 它 包 装 的 对 
象 关系 如 图 6-24 所 示 。 


传 入 参数 


MethodParameters 属性 


被 包装 对 象 


结果 数据 CObjectInstance 属性 ) 


(Data 属性 ) 


ObjectDataProvider 对 象 
图 6-24 ”ObjectDataProvider 对 应 与 被 包装 对 象 的 关系 


了 解 了 ObjectDataProvider 的 使 用 方法 ， 现 在 让 我 们 看 看 如 何 把 它 当 作 
Binding 的 Source 来 使 用 。 程 序 的 XAML 代 码 和 截图 如 下 : 


«Window x:Class=" WpfApplicationl. Window " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"ObjectDataProvider Source" Height-" 135" Width-"300"» 

«StackPanel Background-"LightBlue"» 
«TextBox x:Name-"textBoxArg]" Margin-"5" /> 
«TextBox x:Name-"textBoxArg2" Margin-"5" /> 
«TextBox x:Name-"textBoxResult" Margin-"5" /> 
</StackPanel> 
</Window> 


运行 效果 如 图 6-25 所 示 。 


B` ObjectDataProvider Source 


图 6-25 ”运行 效果 
这 个 程序 需要 实现 的 功能 是 在 上 面 两 个 TextBox 输 入 数字 后 ， 第 3 个 


TextBox 能 实时 地 显示 数字 的 和 。 把 代码 写 在 一 个 名 为 SetBinding 的 方 
法 里 ， 然 后 在 窗 体 的 构造 器 里 调用 这 个 方法 : 


public Window10) 

i 
InitializeComponent(); 
this.SetBinding(); 


private void SetBinding() 

| 
I| 创建 并 配置 ObjectDataProvider 对 象 
ObjectDataProvider odp = new ObjectDataProvider(); 
odp.ObjectInstance = new Calculator(); 
odp.MethodName = "Add"; 
odp.MethodParameters.Add("0"); 
odp.MethodParameters.Add("0"); 


儿 以 ObjectDataProvider 对 象 为 Source 创建 Binding 
Binding bindingToArg! = new Binding(" MethodParameters[0]") 
{ 
Source = odp, 
BindsDirectlyToSource = true, 
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged 


Binding bindingToArg2 = new Binding(" MethodParameters[1]") 
{ 
Source = odp, 
BindsDirectlyToSource = true, 
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged 


Binding bindingToResult = new Binding(".") | Source = odp }; 


// X Binding 关联 到 UI 元 素 上 

this.textBoxArgl SetBinding( TextBox.TextProperty, bindingToArg1); 
this.textBoxArg2.SetBinding( TextBox.TextProperty, bindingToArg2); 
this.textBoxResult.SetBinding( TextBox.TextProperty, binding ToResult); 


让 我 们 来 分 析 一 下 这 个 方法 。 前 面 说 过 ，ObjectDataProvider 类 的 作用 
是 用 来 包装 一 个 以 方法 暴露 数据 的 对 象 ， 这 里 我 们 先是 创建 了 一 个 
ObjectDataProvider 对 象 ， 然 后 用 一 个 Calculator 对 象 为 其 ObjectInstance 
属性 赋值 这 就 把 一 个 Calculator 对 象 包 装 在 了 ObjectDataProvider 对 
象 里 。 还 有 另外 一 个 办 法 来 创建 被 包装 的 对 象 ， 那 就 是 告诉 
ObjectDataProvider 将 被 包装 对 象 的 类 型 和 希望 调用 的 构造 器 ， 让 
ObjectDataProvider 自 己 去 创建 被 包装 对 象 ， 代 码 大 概 是 这 样 : 


odp.ObjectType = typeof( YourClass); 
odp,ConstructorParameters, A dd(arg | ); 


odp.ConstructorParameters.Add(arg2 ; 
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接着 ， 我 们 使 用 MethodName 属 性 指定 将 要 调用 Calculator 对 象 中 名 为 
Add 的 方法 一 一 问题 又 来 了 ， 如 果 Calculator 类 里 有 多 个 重 载 的 Add 方 法 
应 该 怎么 区 分 呢 ? 我 们 知道 ， 重 载 方法 的 区 别 在 于 参数 列表 ， 紧 接 看 
的 两 句 代 码 向 MethodParameters 属 性 中 加 入 了 两 个 string 类 型 的 对 象 ， 这 
就 相当 于 告诉 ObjectDataProvider 对 象 去 调用 Calculator 对 象 中 具有 两 个 
Add 方 法 ， 换 名 话说，MethodParameters 属 性 是 类 型 敏 


准备 好 数据 源 后 ， 我 们 开始 创建 Binding。 在 前 面 我 们 已 经 学 习 过 使 用 
索引 器 作为 Binding 的 Path ， 第 一 个 Binding 它 的 Source 是 
ObjectDataProvider 对 % >` Path 是 ObjectDataProvider 对 象 
MethodParameters [E TE Pr 5| Hj By $& & rp By 58 — 7^ 76 9 
BindsDirectlyToSource=true 这 人 句 的 意思 是 告诉 Binding 对 象 只 负责 把 从 UI 
元 素 收集 到 的 数据 写 入 其 直接 Source 〈 即 ObjectDataProvider 对 象 ) 而 不 
是 被 ObjectDataProvider 对 象 包 装着 的 Calculator 对象。 同时 ， 
UpdateSourceTrigger 属 性 被 设置 为 一 有 更 新 立刻 将 值 传 回 Source。 第 二 
个 Binding 对 象 是 第 一 个 的 翻版 ， 只 是 把 Path 指 向 了 第 二 个 参数 。 第 三 
个 Binding 对 象 仍 然 使 用 ObjectDataProvider 对 象 作为 Source， 但 使 
用 “” 作 为 Path 一 一 前 面 说 过 ， 当 数据 源 本 号 融 代 表 数 据 的 时 候 束 使 
用 “.” 作 Path， 并 且 “.” 在 XAML 代 码 里 可 以 省 略 不 写 。 


注意 


在 把 ObjectDataProvider 对 象 当 作 Binding 的 Source 来 使 用 时 ， 这 个 对 象 本 身 就 代表 了 数据 ， 所 以 
这 里 的 Path 使 用 的 是 “.” 而 非 其 Data 属 性 。 


最 后 一 步 是 把 Binding 对 象 关联 到 3 个 TextBox 对 象 上 。 完 成 后 在 窗 体 类 
的 构造 器 中 调用 这 个 方法 ， 程 序 运 行 的 时 候 就 能 看 到 如 图 6-26 所 示 的 效 


8 ^ ObjectDataProvider Source 


1979 


图 6-26 ”运行 效果 


一 般 情况 下 ， 数 据 从 哪里 来 哪里 就 是 Binding 的 Source、 数 据 到 哪里 去 
哪里 束 应 该 是 Binding 的 Target。 按 这 个 理论 ， 前 两 个 TextBox 应 该 是 
ObjectDataProvider 对 象 的 数据 源 ， 而 ObjectDataProvider 对 象 义 是 最 后 

一 个 TextBox 的 BRUA > 但 实际 上 ， 三 个 TextBox 都 以 ObjectDataProvider 
对 和 象 为 数据 源 ， 只 是 前 两 个 TextBox 在 Binding 的 数据 流向 上 做 了 限制 。 
这 样 做 的 原因 不 外 乎 有 两 个 : 


e “ObjectDataProvider 的 MethodParameters 不 是 依赖 属性 ， 不 能 作为 
Binding 的 目标 ° 


o 数据 驱动 UI 的 理念 要 求 尽 可 能 地 使 用 数据 对 象 作 为 Binding 的 Source 
而 把 UI 元 素 当 作 Binding 的 Target ° 


6.3.42 ”使 用 Binding 的 RelativeSource 


当 一 个 Binding 有 了 明确 的 数据 来 源 时 我 们 可 以 通过 为 Source EX 
ElementName 赋 值 的 办 法 让 Bindng 与 之 关联。 有些 时 候 我 们 不 能 确定 作 
为 Source 的 对 象 叫 什 么 名 字 ， 但 知道 它 与 作为 Binding 目 标的 对 象 在 UI 
布局 上 有 相对 关系 ， 比 如 控件 上 自己 关联 目 己 的 某 个 数据 、 关 联 目 己 某 
级 容 融 的 数据 。 这 时 候 我 们 丈 要 使 用 Binding 的 RelativeSource 属 性 。 


RelativeSource 属 性 的 数据 类 型 为 RelativeSource 类 ， 通 过 这 141 A ANDA 
静态 或 非 静 态 属性 我 们 可 以 控制 它 搜 索 相 对 数据 源 的 方式 。 下 面 这 段 
XAML 代 码 表 示 的 是 多 层 布局 控件 内 放置 着 一 个 TextBox: 


«Window x:Class="WpfApplication1.Window1" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"RelativeSource" Height-"210" Width="210"> 

«Grid x:Name-"g1" Background-" Red" Margin-"10"» 
«DockPanel x: Name-"d1" Background-"Orange" Margin-" 10" 
«Grid x:Name-"g2" Background-" Yellow" Margin-"10"» 
«DockPanel x: Name-"d2" Background" LawnGreen" Margin-" 10" 
«TextBox x:Name-"textBox |" FontSize-"24" Margin-"10" /> 
</DockPanel> 
</Grid> 
</DockPanel> 
</Grid> 
</Window> 


布局 的 图 解 如 图 6-27 所 示 。 


B` RelativeSource ca |. S| 


gl 
dl 
g2 
d2 
textBox1 


图 6-27 多 层 布局 控件 内 有 一 个 TextBox 挥 件 


我 们 把 TextBox 的 Text 属 性 关联 到 外 层 容器 的 Name 属 性 上 。 在 窗 体 的 构 
造 絮 里 添加 几 行 代码 : 


public Window! () 


i 
InitializeComponent(); 


RelativeSource rs = new RelativeSource(RelativeSourceMode.FindAncestor); 
rs. AncestorLevel = 1; 
rs. AncestorType = typeof(Grid); 
Binding binding = new Binding("Name") { RelativeSource = rs }; 
this.textBox1.SetBinding(TextBox. TextProperty, binding); 

] 


或 在 XAML 中 插入 等 效 代 码 : 


Text-" [Binding RelativeSource={RelativeSource FindAncestor, 
AncestorType- x: Type Grid], AncestorLevel-1], Path-Name]" 


AncestorLevel 属 性 指 的 是 以 Binding 目 标 控 件 为 起 点 的 层级 偏 移 量 一 一 

d2 的 偏 移 量 是 1、g2 的 偏 移 量 为 2， 依 次 类 推 。AncestorType 属 性 告诉 

Binding 寻 找 哪个 类 型 的 对 象 作为 自己 的 源 ， 不 是 这 个 类 型 的 对 象 会 被 

跳 过 。 上 面 这 上 段 代 码 的 意思 是 告诉 Binding 从 自己 的 第 一 层 依 次 向 外 

0 
ZN œ 


8  RelativeSource 
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图 6-28 ”运行 效果 


如 琳 把 代码 更 改 为 这 样 : 


public Window1() 
i 


InitializeComponent(); 


RelativeSource rs = new RelativeSource(); 

rs.AncestorLevel = 2; 

rs.AncestorType = typeof(DockPanel); 

Binding binding = new Binding(" Name") { RelativeSource = rs ]; 
this.textBox l.SetBinding( TextBox. TextProperty, binding); 


或 在 XAML 中 插入 等 效 代 码 : 
Text-" (Binding RelativeSource={RelativeSource Ancestor Type-[x: Type DockPanel) AncestorLevel-2), Path-Name]" 


运行 效 末 如 图 6-29 所 示 。 


图 6-29 ”运行 效果 


如 果 TextBox 和 需要 关联 自身 的 Name 属 性 ， 则 代码 应 该 是 这 样 : 


public Window! () 
i 


InitializeComponent(); 


RelativeSource rs = new RelativeSource(); 

rs.Mode = RelativeSourceMode.Self; 

Binding binding = new Binding("Name") { RelativeSource = rs j; 
this.textBox l.SetBinding( TextBox. TextProperty, binding); 


运行 效果 如 图 6-30 所 示 。 


: r nie aai, 
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图 6-30 ”运行 效果 


RelativeSource 类 的 Mode 属 性 的 类 型 是 RelativeSourceMode 枚 举 ， 它 的 取 
值 有 : PreviousData ^ TemplatedParent ^ Self 和 FindAncestor ° 
RelativeSource 类 还 有 3 个 静态 属性 : PreviousData ^ Self 和 
TemplatedParent， 他 们 的 类 型 是 RelativeSource 类 。 实 际 上 这 3 个 静态 属 
性 就 是 创建 一 个 RelativeSource 实 例 、 把 实例 的 Mode 属 性 设置 为 相应 的 
值 ， 然 后 返回 这 个 实例 。 之 所 以 准备 这 3 个 静态 属性 是 为 了 在 XAML 代 
人 码 里 直接 获取 RelativeSource 实 例 。 下 面 是 它们 的 源码 : 


public static RelativeSource PreviousData 


| 


get 
i 
if (s previousData == null) 
i 
s previousData = new RelativeSource(RelativeSourceMode.PreviousData); 
} 
retum s previousData; 


public static RelativeSource TemplatedParent 
i 


get 
| 
if (s templatedParent = null) 
| 
s templatedParent = new RelativeSource(RelativeSourceMode.TemplatedParent ; 
return s templatedParent; 
} 


public static RelativeSource Self 
| 
get 


| 
if (s self = null) 


i 

s self = new RelativeSource(RelativeSourceMode. Self); 
| 
return s. self 


在 DataTemplate 中 会 经 常用 到 这 3 个 静态 属性 ， 学 习 DataTemplate 时 候 请 
留意 它们 的 使 用 方法 。 


6.4 Binding 对 数据 的 转换 与 校 验 


前 面 我 们 已 经 知道 ，Binding 的 作用 就 是 架 在 Source 与 Target 之 间 的 桥 
深 ， 数 据 可 以 在 这 座 桥梁 的 帮助 下 来 流通 。 就 像 现 实 世 界 中 的 桥梁 会 
设置 一 些 关 卡 进行 安检 一 样 ，Binding 这 座 桥 上 也 可 以 设置 关卡 对 数据 
的 有 效 性 进行 检验 ， 不 仅 如 此 ， 当 Binding 两 端 要 求 使 用 不 同 的 数据 类 
型 时 ， 我 们 还 可 以 为 数据 设置 转换 器 。 


Binding 用 于 数据 有 歼 性 校 验 的 关卡 是 它 的 ValidationRules 属 性 ， 用 于 数 
6 性 。 下 面 就 让 我 们 来 学 习 使 用 它 
| o 


6.41 Binding 的 数据 校 验 


Binding 85 ValidationRules J& ^: X 7! Z& Collection«ValidationRule» , AE 
的 名 称 和 数据 类 型 可 以 得 知 可 以 为 每 个 Binding 设 置 多 个 数据 校 验 条 
件 ， 每 个 条 件 是 一 个 ValidationRule 类 型 对 象 。ValidationRule 类 是 个 抽 
象 类 ， 在 使 用 的 时 候 我 们 需要 创建 它 的 派生 类 并 实现 它 的 Validate 方 
法 。Validate 方 法 的 返回 值 是 validationResult 类 型 对 象 ， 如 果 校 验 通 
过 ， 就 把 ValidationResult 对 象 的 IsValid 属 性 设 为 tue， 反 之 ， 需 要 把 
IsValid 属 性 设 为 false 并 为 其 ErrorContent 属 性 设置 一 个 合适 的 消息 内 容 
(一 般 是 个 字符 串 ) 。 


下 面 这 个 程序 是 在 UI 上 绘制 一 个 TextBox 和 一 个 Slider， 然 后 在 后 台 C# 
代码 里 使 用 Binding 把 它们 关联 起 来 Ll Slider ji ` TextBox 7j H 
标 。Slider 的 取 值 范围 是 0 到 100， 也 就 是 说 ， 我 们 需要 校 验 TextBox 里 输 
入 的 值 是 不 是 在 0 到 100 这 个 范围 内 。 


程序 的 XAML 部分: 


«Window x:Class-" WpfApplicationl.Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Titlez" Validation" Height" 120" Width-"300"» 
«StackPanel^ 
«TextBox x:Name-"textBox |" Margin-"5" /> 
«Slider x:Name-"sliderl" Minimum-"0" Maximum-" 100" Margin-"5" /> 
«/StackPanel^ 
</Window> 


为 了 进行 校 验 ， 需 要 准备 一 个 ValidationRule 的 派生 类 : 


public class RangeValidationRule : ValidationRule 
i 
/| 需要 实现 Validate 方法 
public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo) 


I 
double d = 0; 


if (double. TryParse( value. ToString(), out d)) 
1 

if(d»- 0 && d <= 100) 

| 


return new ValidationResult(true, null); 


return new ValidationResult(false, "Validation Failed"); 


然后 在 窗 体 的 构造 器 里 这 样 建 六 Binding: 


public Window! () 


InitializeComponent(); 


Binding binding = new Binding(" Value") | Source = this.slider] }; 
binding. UpdateSourceTrigger  UpdateSourceTrigger.PropertyChanged; 
RangeValidationRule rvr = new RangeValidationRule(); 
binding. ValidationRules.Add(rvr); 
this.textBox] SetBinding(TextBox. TextProperty, binding); 

| 


完成 后 运行 程序 ， 当 输入 0 到 100 之 间 的 值 时 程序 正常 显示 ， 但 输入 这 
个 区 间 之 外 的 值 或 不 能 被 解析 的 值 时 TextBox 会 显示 红色 边框 ， 表 示 值 
是 错误 的 ， 不 能 把 它 传 递 给 Source。 效 果 如 图 6-31 所 示 。 


"Validation 


图 6-31 ”Binding 的 数据 校 验 示例 


Binding 进 行 校 验 时 的 默认 行为 是 认为 来 日 Source 的 数据 总 是 正确 的 ， 
只 有 来 自 Target 的 数据 (因为 Target 多 为 UI 控件 ， 所 以 等 价 于 用 户 输 入 
的 数据 ) 才 有 可 能 有 问题 ,为 了 不 让 有 问题 的 数据 污染 Source 所 以 需要 
校 验 。 换 句 话 说 ，Binding 只 在 Target 补 外 部 方法 更 新 时 校 验 数据 ， 而 来 
自 Binding 的 Source 数 据 更 新 Target 时 是 不 会 进行 校 验 的 。 如 果 想 改变 这 
种 行为 ， 或 者 说 当 来 自 Source 的 数据 也 有 可 能 出 问题 时 ， 我 们 就 需要 将 
校 验 条 件 的 ValidatesOnTargetUpdated 属 性 设 为 true。 


先 把 slider1 的 取 值 范围 由 0 到 100 改 成 -10 到 110: 


«Slider x: Name-"slider1" Minimum-"-10" Maximum" 110" Margin-"5" /> 


然后 把 设置 Binding 的 代码 改 为 : 


public Window! () 
{ 


InitializeComponent(); 


Binding binding = new Binding(" Value") { Source = this.slider] j; 
binding. UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
RangeValidationRule rvr = new RangeValidationRule(); 

rr. ValidatesOnTargetUpdated = true; 

binding. ValidationRules.Add(rvr); 

this.textBox 1 SetBinding( TextBox. TextProperty, binding); 


这 样 ， 当 Slider 的 滑 块 移出 有 效 范 围 时 TextBox 也 会 显示 校 验 失败 的 效果 
如 图 6-32 所 示 。 
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图 6-32 ”Binding 校 验 来 自 Source 的 数据 


你 可 能 会 想 ， 当 校 验 错误 的 时 候 Validate 方 法 返回 的 ValidationResult 对 
象 携 融 着 一 条 错误 消息 ， 如 何 显示 这 条 消息 呢 ? 想 要 做 到 这 一 点 ， 需 
要 用 到 后 面 才 会 详细 讲解 的 知识 路 由 事件 (Routed Event) 。 


首先 ， 在 创建 Binding 时 要 把 Binding 对 象 的 NotifyOnValidationError 属 性 
设 为 tue， 这 样 ， 当 数据 校 验 失败 的 时 候 Binding 会 像 报 警 絮 一 样 发 出 
个 信号 ， 这 个 信号 会 以 Binding 对 象 的 Target 为 起 点 在 UI 元 素 树 上 传播 。 
信和 号 每 到 达 一 个 结 点 ， 如 果 这 个 结 点 上 设置 有 对 这 种 信和 号 的 侦 听 器 
(事件 处 理 器 ) ， 那 么 这 个 侦 听 器 就 会 被 触发 用 以 处 理 这 个 信号 。 信 
号 处 理 完 后 ， 程 序 员 还 可 以 选择 是 让 信号 继续 同 下 传播 还 是 就 此 终止 
一 一 这 就 是 路 由 事件 ， 信 号 在 UI 元 素 树 上 的 传递 过 程 就 称 为 路 由 


(Route) 。 


建立 Binding 的 代码 如 下 : 


public Window1() 


J 
1 


InitializeComponent(); 


Binding binding = new Binding(" Value") { Source = this.sliderl j; 
binding. UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
Range ValidationRule rvr = new RangeValidationRule(J; 

rvr. ValidatesOnTargetUpdated = true; 

binding. ValidationRules.Add(rvr); 

binding.NotifyOnValidationError = true; 

this.textBox |. SetBinding( TextBox. TextProperty, binding); 


this.textBox1.AddHandler(Validation.ErrorEvent, new RoutedEventHandler(this. ValidationError)); 


FIT DIU BERN TH RRF REES P: 


void ValidationError(object sender, RoutedEventArgs c) 


Í 
1 


if (Validation.GetErrors(this.textBox1).Count > 0) 


I 
this.textBox1.ToolTip = Validation.GetErrors(this.textBox1)[0].ErrorContent.ToString(); 


f 


| 


TextBox 的 ToolTip 残 会 提示 用 户 ， 如 图 6-33 
ZR œ 


E` Validation 


| Validation Failed 


图 6-33” 校 验 失败 提示 
6.4. ”Binding 的 数据 转换 


前 面 的 很 多 例子 中 我 们 都 使 用 Binding 在 Slider 探 件 与 TextBox 控 件 之 间 
建立 关联 Slider 探 件 作 为 Source (Path 是 Value 属性 ) ，TextBox 探 件 
作为 Target (目标 属性 为 Text) 。 不 知道 大 家 有 没有 注意 到 ，Slider 的 
Value 属 性 是 double 类 型 值 、TextBox 的 Text 属 性 是 string 类 型 值 ， 在 C# 这 
种 强 类 型 (strong-typed) 语言 中 却 可 以 往来 自如 ， 这 是 怎么 回 事 呢 ? 


原来 ，Binding 还 有 另外 一 种 机 制 称 为 数据 转换 (Data Convert) ， 当 
Source 端 Path 所 关联 的 数据 与 Target 端 目标 属性 数据 类 型 不 一 致 时 ， 我 
们 可 以 添加 数据 转换 器 (Data Converter) 。 上 面 提 到 的 问题 实际 上 是 
double 类 型 与 string 类 型 互相 转换 的 问题 ， 因 为 处 理 起 来 比较 简单 ， 所 
以 WPF 类 库 就 自动 奉 我 们 做 了 。 但 有 些 类 型 之 间 的 转换 就 不 是 WPF 能 
蔚 我 们 做 的 了 ， 例 如 下 面 这 些 情 况 : 


e Source 里 的 数据 是 Y、N 和 X 三 个 值 (可 能 是 char 类 型 、string 类 型 或 
自 定 义 枚 举 类 型 ) ，UI 上 对 应 的 是 CheckBox 控 件 ， 需 要 把 这 三 个 值 映 
射 为 它 的 IsChecked 属 性 值 \bool? 类 型 ) 。 


o 当 TextBox 里 已 经 输入 了 文字 时 用 于 登录 的 Button 才 会 出 现 ， 这 是 
string 类 型 与 Visibility 枚 举 类 型 或 bool 类 型 之 间 的 转换 (Binding 的 Mode 
将 是 OneWay) 。 


e Source 里 的 数据 可 能 是 Male 或 Female (string 或 枚 举 ) ，UI 上 对 应 的 
是 用 于 显示 头像 的 Image 控 件 ， 这 时 候 需 要 把 Source 里 的 值 转换 成 对 应 
的 头像 图 片 URI 〈 亦 是 Oneway) 。 当 遇 到 这 些 情况 时 ， 我 们 只 能 自己 
动手 写 Converter， 方 法 是 创建 一 个 类 并 让 这 个 类 实现 TValueConverter 接 
L1 ° IValueConverterf O Œ X. All F: 


public interface IValueConverter 


| 
l 


object Convert(object value, Type targetType, object parameter, Culturelnfo culture); 
object ConvertBack(object value, Type targetType, object parameter, Culturelnfo culture); 


1 
j 


当 数 据 从 Binding 的 Source 流 向 Target 时 ，Convert 方 法 将 被 调用 ; 反之 ， 
ConvertBack 方 法 将 被 调用 。 这 两 个 方法 的 参数 列表 一 模 一 样 : 第 一 个 
参数 为 object， 最 大 限度 地 保证 了 Converter 的 重用 性 (可 以 在 方法 体内 
对 实际 类 型 进行 判断 ) ; 第 二 个 参数 用 于 确定 方法 的 返回 类 型 (个 人 
认为 形 参 名 字 叫 outputType 比 targetType 要 好 ， 可 以 避免 与 Binding 的 
Target) ; 第 三 个 参数 用 于 把 额外 的 信息 传 入 方法 ， 若 需要 传递 多 
个 信息 则 可 把 信息 放 入 一 个 集合 对 象 来 传 入 方法 。 


Binding 对 象 的 Mode 属 性 会 影响 到 这 两 个 方法 的 调用 。 如 果 Mode 为 
TwoWay 或 Default 行 为 与 TwoWay 一 致 则 两 个 方法 都 有 可 能 被 调用 ;如 
打 Mode 为 OneWay 或 Default 行 为 与 Oneway 一 致 则 只 有 Convert 方 法 会 被 
调用 ; 其 他 情况 同 理 。 


下 面 这 个 例子 是 一 个 Converter 的 综合 实例 ， 程 序 的 用 途 是 在 列表 里 问 
玩家 显示 一 些 军 用 飞机 的 状态 。 


首先 创建 几 个 自 定义 数据 类 型 : 


|| 种 类 
public enum Category 
| 

Bomber, 

Fighter 


I| 状态 
public enum State 


f 
1 


Available， 
Locked, 


Unknown 


放飞 机 

public class Plane 

| 
public Category Category | get; set; } 
public string Name | get; set; } 
public State State | get; set; } 


在 UI 里 Plane 的 Category 属 性 被 映射 为 爱 炸 机 或 战斗 机 的 图 标 ， 这 两 个 
图 标 我 已 经 加 入 了 项 目 如 图 6-34 所 示 。 


Solution Explorer - Solution 'WpfApplicatio... (s 
ka e] 


| wind T ec | 
[od Solution "WpfApplicationl' (1 project) 
日- (8) WpfApplicationi 


(a) Properties 
«3 References 


5 mE 


id] Bomber.png 
d] Fighter.png 
æ App.xaml 
se Windowl.xaml 


图 6-34 ”项 目 中 的 两 个 图 标 


同时 ， 飞 机 的 State 属 性 在 UI 里 被 映射 为 CheckBox。 因 为 存在 以 上 两 个 
映射 关系 ， 我 们 需要 提供 两 个 Converter: 一 个 是 由 Category 类 型 单 向 转 
换 为 string 类 型 (XAML 编 译 器 能 够 把 string 对 象 解析 为 图 片 资 源 ) , A 
一 个 是 在 State 与 bool? 类 型 之 间 双 同 转 换 。 代 码 如 下 : 


public class Category ToSourceConverter : IValueConverter 


| 
儿 将 Category 转换 为 Uri 
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
| 
Category c = (Category )value; 


switch (c) 
{ 
case Category.Bomber: 
return (à Icons Bomber.png"; 
case Category Fighter: 
return (a^ lcons!Fighter.png": 
default: 
return null; 
} 
} 
I| 不 会 被 调用 


public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
{ 


throw new NotImplementedException(); 


public class StateToNullableBoolConverter : IValueConverter 
| 
JI 将 State 转换 为 bool? 
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
| 
State s  (State)value; 
switch (s) 
{ 
case State. Locked: 
return false; 
case State. Available: 
retum true; 
case State. Unknown: 
default: 
return null; 


儿 将 bool? 转 换 为 State 
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
| 
bool? nb = (bool?)value; 
switch (nb) 
i 
case true: 
return State.Available; 
case false: 
return State.Locked; 
case null; 
default: 
return State.Unknown; 
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«Window x:Class-"WpfApplicationl .Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:localz"clr-namespace: W pfA pplication]" 

Title-"Data Converter" Height-"266" Width-"300"» 


«Window.Resources» 
«local:Category ToSourceConverter x:Keyz"cts" /> 
«local:StateToNullableBoolConverter x:Keyz"stnb" /> 
«/Window.Resources» 


<StackPanel Background-"LightBlue"» 
«ListBox x:Namez"listBoxPlane" Heightz" 160" Marginz"5" /> 
«Button x:Name-"buttonLoad" Content-"Load" Height-"25" Margin-"5,0" 
Click-"buttonLoad Click" /> 
«Button x:Name-"buttonSave" Content-"Save" Height-"25" Margin-" 5,5" 
Click-"buttonSave Click" /> 
«/StackPanel» 
«Window 


XAML 代 码 中 已 经 添加 了 对 程序 集 的 引用 并 映射 为 名 称 空间 local， 同 
上 时， 以 资源 的 形式 创建 了 两 个 Converter 的 实例 。 名 为 listBoxPlane 的 
ListBox 控 件 是 我 们 工作 的 重点 ， 需 要 为 它 添加 用 于 显示 数据 的 
DataTemplate。 我们 把 焦点 集中 在 ListBox 控 件 的 ItemTemplate 属 性 上 : 


«ListBox x:Name-"listBoxPlane" Height" 160" Margin-" 5" 
«ListBox.ItemTemplate? 
«DataTemplate? 
«StackPanel Orientation-"Horizontal"» 
«Image Width-"20" Height-"20" 
Sourcez" [Binding PathzCategory, Converterz(StaticResource cts}}" /> 
<TextBlock Text-" [Binding Path-Name]" Width-"60" Margin-"80,0" /> 
«CheckBox IsThreeState-"True" 
IsCheckedz" (Binding Path=State, Converterz[StaticResource stnb]]" /> 
«/StackPanel» 
</DataTemplate> 
</ListBox,ItemTemplate> 
</ListBox> 


Load 按 钮 的 Click 事 件 处 理 器 人 负责 把 一 组 飞机 的 数据 赋值 给 ListBox 的 
Es 性 ，Save 按 钮 的 Click 事 件 处 理 絮 人 负责 把 用 户 更 改过 的 数 
HEA : 


ll Load. 按钮 Click 事件 处 理 器 
private void buttonLoad Cjick(object sender, RoutedEventArgs €) 
i 


List<Plane> planeList = new List<Plane>() 
{ 
new Plane( 
new Plane( 


Category= Category.Bomber, Name-"B-1", State = State,Unknown), 
Category= Category.Bomber, Name="B-2", State = State,Unknown), 
Category= Category.Fighter, Name="F-22", State = State.Unknown], 
Category= Category.Fighter, Name="Su-47", State = State.Unknown}, 
Category= Category.Bomber, Name="B-52", State = State.Unknown], 
Category= Category.Fighter, Name="J-10", State = State.Unknown} 


) 
) 
new Plane() 
new Plane() 
) 
) 


new Plane( 
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new Plane( 
h 


this.listBoxPlane.ItemsSource = planeList; 


ll Save 按钮 Click 事件 处 理 器 
private void buttonSave Click(object sender, RoutedEventArgs e) 
| 
StringBuilder sb = new StringBuilder(); 
foreach (Plane p in listBoxPlane.Items) 
| 
sb.AppendLine(string.Format("Category7 (0), Name={1}, State={2}", p.Category, p.Name, p.State)); 


} 
File.WriteAllText(@"D:\PlaneList.txt", sb.ToString()); 


运行 程序 并 单 击 CheckBox 更 改 飞 机 的 State， 歼 果 如 图 6-35 所 示 。 


Kle-35 “运行 效果 


单 击 Save 按 钮 后 打开 D:\PlaneList.txt， 数 据 如 图 6-36 所 示 。 


Category-Bomber, Name-B-1, State=Locked 
CategoryzBomber. Name-B-2, State- Unknown 
Category-Fighter. Name=F-22. State-Available 


Category-Fighter, Name-Su-47, State-Available 
Category-Bomber, Name-B-52, State-Available 
Category-Fighter, NamezJ-10, StatezAvailable 


图 6-36 ”PlaneList.txt 文 件 中 的 数据 


6.5 MultiBinding (多 路 Binding) 


有 的 时 候 UI 要 需要 显示 的 信息 由 不 止 一 个 数据 来 源 决定 ， 这 时 候 就 需 
要 使 用 MultiBinding， 即 多 路 Binding。MultiBinding 与 Binding 一 样 均 以 
BindingBase 为 基 类 ， 也 就 是 说 ， 凡 是 能 使 用 Binding 对 象 的 场合 都 能 使 
用 MultiBinding。MnultiBinding 具 有 一 个 名 为 Bindings 的 属性 ， 其 类 型 是 
Collection<BindingBase> ， 通 过 这 个 属性 MultiBinding 把 一 组 Binding 对 
象 聚 合 起 来 ， 处 在 这 个 集合 中 的 Binding 对 象 可 以 拥有 自己 的 数据 校 验 
与 转换 机 制 ， 它 们 汇集 起 来 的 数据 将 共同 决定 传 往 MultiBinding 目 标的 
数据 ， 如 图 6-37 所 示 。 


MultiBinding 对 象 


Bindings 属性 
Binding 对 象 


Binding 对 象 


Binding 对 象 - 


Binding 对 象 


Source 


图 6-37 ”MultiBinding 示 意图 


考虑 这 样 一 个 需求 ， 有 一 个 用 于 新 用 户 注册 的 UI (包含 4 个 TextBox 和 
一 个 Button) ， 还 有 如 下 一 些 限定 ; 


e 第 一 、 二 个 TextBox 输 入 用 户 名 ， 要 求 内 容 一 致 。 
e 第 三 、 四 个 TextBox 输 入 用 户 E-Mail， 要 求 内 容 一 致 。 
e 当 TextBox 的 内 容 全 部 符合 要 求 的 时 候 ，Button 可 用 。 


此 UI 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication] Window]" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"MultiBinding" Height-" 185" Width-"300"» 

«StackPanel Background" LightBlue"» 
«TextBox x:Name-"textBox1" Height-"23" Margin-"5" /> 
«TextBox x:Name-"textBox2" Height-"23" Margin-"5,0" /> 
«TextBox x:Name-"textBox3" Height-"23" Margin-"5" /> 
«TextBox x:Name-"textBox4" Height-"23" Margin-"5,0" /> 
«Button x:Name-"button]" Content-"Submit" Width-"80" Margin-"5" /> 
«/StackPanel» 
</Window> 


然后 把 用 于 设置 MultiBinding 的 代码 写 在 名 为 SetMultiBinding 的 方法 里 
并 在 窗 体 的 构造 器 中 调用 : 


注意 


public Window1() 


| 


InitializeComponent(); 


this.SetMultiBinding(); 


private void SetMultiBinding() 


J| 准备 基础 Binding 

Binding bl = new Binding("Text") | Source = thistextBoX] }; 
Binding b2 = new Binding("Text") | Source = this.textBox2 }; 
Binding b3 = new Binding(" Text") | Source = this.textBox3 j; 
Binding b4 = new Binding" Text") | Source = this.textBox4 j; 


儿 准备 MultiBinding 

MultiBinding mb = new MultiBinding() | Mode = BindingMode.OneWay }; 
mb.Bindings.Add(bl); // E$: MultiBinding 对 Add F Binding 的 顺序 是 敏感 的 
mb.Bindings.Add(b2); 

mb.Bindings.Add(b3); 

mb.Bindings.Add(b4 ; 

mb.Converter = new LogonMultiBindingConverter(); 


路 将 Button 与 MultiBinding 对 象 关联 
this.button .SetBinding(Button.IsEnabledProperty, mb); 


这 里 有 几 点 需要 注意 的 地 方 : 


e MnultiBinding 对 于 添加 子 级 Binding 的 顺序 是 敏感 的 ， 因 为 这 个 顺序 决定 了 汇集 到 Converter 


里 数据 的 顺序 。 


e MultiBinding 的 Converter 实 现 的 是 IMultiValueConverter 接 口 。 


本 例 的 Converter 代 码 如 下 : 


注意 基 类 的 变化 
public class LogonMultiBindingConverter : IMulti ValueConverter 


| 
public object Convert(object[] values, Type targetType, object parameter, Culturelnfo culture) 


í 
if (Ivalues.Castsstring»().Any(text => string.IsNullOrEmpty(text)) 
&& values[0].ToString() = values[1].ToString() 
&& values[2].ToString() = values[3].ToString()) 


return true; 


| 


return false; 


I| 不 会 被 调用 
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
| 


throw new NotImplementedException(); 


程序 的 运行 效果 如 图 6-38 所 示 。 


V MultiBinding > 1^ Multiinding | 8 mem 


no soundGhotmail.com 
no_sound@hotmailcon 


图 6-38 ”MultiBinding 示 例 
6.6 小 结 


WPF 的 核心 理念 是 变 传统 的 UI 驱动 程序 为 数据 驱动 UI， 文 撑 这 个 理念 
的 基础 就 是 本 章 讲述 的 Data Binding 和 与 之 相关 的 数据 校 验 与 转换 。 在 
使 用 Binding 时 ， 最 重要 的 事情 就 是 准确 地 设置 它 的 源 和 路 径 。 


当 学 习 完 Binding 后 ， 我 们 迎 来 了 新 的 问题 一 为 什么 WPF 里 的 UI 元 素 
可 以 通过 Binding 关 联 到 数据 上 ， 实 时 关注 数据 的 变化 呢 ? 换 句 话说 ， 
什么 样 的 对 象 才能 作为 Binding 的 目标 来 使 用 呢 ? 这 就 是 我 们 下 一 章 要 
详细 讲述 的 内 容 一 一 依赖 属性 与 依赖 对 象 。 


7 
深入 浅 出 话 属性 


通过 前 面 的 学 习 ， 我 们 已 经 知道 Data Binding 是 WPF“ 数 据 驱 动 UI”* 理 念 
的 基础 。 上 一 章 我 们 把 精力 放 在 了 Binding 的 数据 源 这 一 端 ， 人 研究 了 
Binding 的 Source 与 Path， 本 章 我 们 将 把 目光 移 向 Binding 的 目标 端 ， 研 
dei 什么 样 的 对 象 才能 作为 Binding 的 Target 以 及 Binding 将 把 数据 送 
往 何 处 。 


7.1 属性 (Property) 的 来 龙 去 脉 


程序 的 本 质 就 是 “数据 十 算法 ”， 或 者 说 是 用 算法 来 处 理 数据 以 期 得 到 
输出 结果 。 在 程序 中 ， 数 据 表 现 为 各 种 各 样 的 变量 ， 算 法 则 表现 为 各 
种 各 样 的 函数 〈 操 作 符 是 函数 的 简 记 法 ) 。 即 使 是 到 了 面向 对 象 时 代 
有 了 类 等 数据 结构 的 出 现 ， 这 一 本 质 仍 然 没 有 改变 一 一 类 的 作用 只 有 是 
把 散落 在 程序 中 的 变量 和 函数 进行 归档 封 厂 并 控制 对 它们 的 访问 而 
已 。 被 封装 在 类 里 的 变量 称 为 字段 (Field) ， 它 表示 的 是 类 或 实例 的 
状态 ;被 封装 在 类 里 的 函数 称 为 方法 (Method) ， 它 表示 类 或 实例 的 
功能 ( 即 能 做 什么 ) 。 字 段 和 方法 构成 了 最 原始 的 面向 对 象 封 装 ， 这 
时 候 的 面向 对 象 概念 中 还 不 包含 事 件 、 属 性 等 概念 。 


我 们 可 以 使 用 诸如 private、public 等 修饰 从 来 控制 字段 或 方法 的 可 访问 
性 ， 是 否 使 用 static 天 键 字 来 修饰 字段 或 方法 则 决定 了 字段 或 方法 是 对 
类 有 意义 还 是 对 类 的 实例 有 意义 。 所 谓 “ 对 类 有 意义 ”或 “对 实例 有 意 
义 ” 都 是 语义 范畴 的 概念 。 比 如 对 于 Human 这 个 类 来 说 ，Weight (Œ 
量 ) 这 个 字段 对 于 人 类 的 个 体 是 有 意义 的 ， 而 对 于 “人 类 ”这 个 概念 并 
没有 什么 意义 ; Amount (总 量 ) 这 个 字段 就 不 一 样 了 ， 它 对 于 人 类 的 
个 体 没 有 意义 ,但 对 于 人 类 是 有 意义 的 。 方 法 也 有 类 似 的 情况 ， 比 如 
Speak 这 个 方法 ， 只 有 人 类 的 个 体 才 能 Speak， 而 Populate (T) 这 个 
方法 似乎 对 于 人 类 比 对 于 人 类 的 个 体 更 有 意义 。 为 了 让 程序 满足 语义 
要 求 ，C# 语 言 规定 : 对 类 有 意义 的 字段 和 方法 使 用 static 关 键 字 修饰 、 
称 为 静态 成 员 ， 通 过 类 名 加 访问 操作 符 〈 即 “.” 操 作 符 ) 可 以 访问 它 
们 ; 对 类 的 实例 有 意义 的 字段 和 方法 不 加 static 关 键 字 ， 称 为 非 静 态 成 
员 或 实例 成 员 。 


从 语义 方面 来 看 ， 静 态 成 员 与 非 静 态 成 员 有 着 很 好 的 对 称 性 ， 但 从 程 
序 在 内 存 中 的 结构 来 看 ， 这 种 对 称 就 被 打破 了 。 静 态 字段 在 内 存 中 只 
有 一 个 找 贝 ， 非 静态 子 段 则 是 每 个 实例 拥有 一 个 拷贝 ， 无论 方法 古 否 
为 静态 的 ， 在 内 存 中 只 会 有 一 份 拷贝 ， 区 别 只 古 你 能 通过 类 名 来 访问 
存放 指令 的 内 存 还 是 通过 实例 名 来 访问 存放 指令 的 内 存 。 


现在 让 我 们 看 看 属性 是 怎样 演变 出 来 的 。 字 段 极 封 又 在 实例 里 ， 要 人 么 
Eo a I] (dÉprivatef tff) 、 要 么 不 能 (使 用 private 修 饰 ，， 如 图 
7-LWTZh-* 


图 7-1 字段 的 访问 权限 


这 种 直接 把 数据 骏 露 给 外 界 的 作法 很 不 安全 ， 很 容易 就 会 把 错误 的 值 
写 入 了 字段。 如 采 在 每 次 写 入 数据 的 时 候 都 先 判 断 一 下 值 的 有 效 性 又 会 
增加 元 余 的 代码 并 且 违 反面 向 对 象 要 求 “ 高 内 聚 * 的 原则 ， 我 们 希望 对 
象 上 自己 有 能 力 判 断 将 被 写 入 的 值 是 否 正确 。 于 是 ， 程 序 员 仍然 把 字段 
标记 为 private 但 使 用 一 对 非 private 的 方法 来 包装 它 。 在 这 对 方法 中 ,一 
个 以 Set 为 前 绥 且 负责 判断 数据 的 有 将 性 并 写 入 数据 ， 另 一 个 以 Get 为 前 
级 且 人 负责 把 字段 里 的 数据 读 取出 来 。 如 图 7-2 所 示 。 


图 7-2 ”类 中 的 Set 方 法 与 Get 方 法 
以 Human 类 为 例 ， 如 果 把 类 设计 成 这 样 


class Human 
f] 
1 


public int Age; 


1 
j 

那么 当 有 类 似 这 样 的 操作 时 ， 就 有 可 能 不 被 察觉 ， 
Human h = new Human(); 

h.Age = -100; 

h.Age = 1000; 


Il 


但 把 类 设计 成 这 样 ， 
class Human 

Í 

1 


private int age; 


public void SetAge(int value) 


| 


if (value >= 0 && value <= 100) 
| this.age = value; } 
else 


{ throw new OverflowException(" Age overflow."); | 


public int GetAge() 


f 
1 


return this.age; 


则 情况 就 会 好 很 多 。 如 果 去 挤 SetAge 方 法 或 者 用 private 修 饰 SetAge 方 
法 ， 那 么 对 数据 的 访问 就 变 成 了 只 读 形 式 (Read-only) 。 很 多 传统 的 
类 库 使 用 的 就 是 这 种 数据 封装 和 访问 方法 ， 例 如 MFC 束 是 这 样 。 我 们 
称 这 对 Get/Set 方 法 为 private 字 段 的 安全 包装 。 


f FHWA A ZIIARAEE— TFR ADE, EEA En, 5 
的 时 候 代 码 比 较 分 散 ， 使 用 的 时 候 又 要 在 自动 提示 里 上 下 翻动 。 于 
是 ， 当 .NET Framework 推 出 时 ,微软 更 进一步 把 Get/Set 这 对 方法 合 3 

成 了 属性 (Property) 。 使 用 属性 时 ， 格 式 上 很 像 使 用 非 private 字 段 ， 

保证 了 语义 上 的 顺畅 ， 同 时 又 不 失 GetSet 方 法 的 安全 性 ， 代 码 变 得 更 
加 紧 疱 ， 目 动 提示 有 某 单 也 短 了 许多 ， 可 谓 一 举 多 得 。 使 用 属性 ， 

Human 类 可 以 改写 成 这 样 : 


class Human 


| 
l 


private int age; 


public int Age 

i 
get { return this.age; } 
set 


if (value >= 0 && value <= 100) 
{ this.age = value; } 
else 


| throw new OverflowException(" Age overflow."); } 


1 
j 


这 种 .NET Framework 中 的 属性 又 称 为 CLR 属 性 (CLR, Common 
Language Runtime) 。 我 们 既 可 以 说 CLR 属 性 是 private 字 段 的 安全 访问 
包装 ， 也 可 以 说 一 个 private 字 段 在 后 台 文 持 (back) 一 个 CLR 属 性 。 这 
个 模式 可 以 用 如 图 7-3 所 示 的 模式 解释 。 


图 7-3 CLR 


实例 


属性 模式 


最 后 还 有 个 小 问题 : 实例 的 每 个 private 字 段 都 会 占用 一 定 的 内 存 ， 现 在 
字段 被 属性 包装 了 起 来 ， 每 个 实例 看 上 去 都 带 有 相同 的 属性 ， 那 么 是 
不 是 每 个 实例 的 CLR 属 性 也 会 多 占 一 点 内 存 呢 ? 想得到 这 个 问题 的 答 
案 ， 使 用 I 开 反 编译 器 打开 编译 结果 就 可 以 了 如 图 7-4 所 示 。 
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图 7-4 ” CLR 属性 的 编辑 结果 


原来 C# 代 码 中 的 属性 的 编译 结果 是 两 个 方法 ! 前 面 已 经 说 过 ， 再 多 实 
例 方 法 也 只 有 一 个 乒 贝 ， 所 以 ，CLR 属 性 并 不 会 增加 内 存 的 负担 。 同 
时 也 说 明 ， 属 性 仅仅 是 个 语法 糖衣 (Syntax Sugar) ° 


7.2 ”依赖 属性 (Dependency Property) 

在 WPF 中 ， 微 软 将 属性 这 个 概念 又 向 前 推进 了 一 步 ， 推 出 了 “依赖 属 
性 ”这 个 新 概念 。 简 言 之 ， 依 赖 属性 就 是 一 种 可 以 自己 没有 值 ， 并 能 通 
过 使 用 Binding 从 数据 源 获得 值 (依赖 在 别人 身上 ) 的 属性 。 拥 有 依赖 
属性 的 对 象 被 称 为 “依赖 对 象 *。 与 传统 的 CLR 属 性 和 面向 对 象 思想 相 比 
依赖 属性 有 很 多 新 颖 之 处 ， 其 中 包括 : 

e 节省 实例 对 内 存 的 开销 。 


e 属性 值 可 以 通过 Binding 依 赖 在 其 他 对 象 上 。 


下 面 束 让 我 们 逐一 分 析 这 些 新 特性 。 
7.2.1 ”依赖 属性 对 内 存 的 使 用 方式 


依赖 属性 较 之 CLR 属 性 在 内 存 使 用 方面 迎 然 不 同 。 前 面 已 经 说 过 ， 实 
例 的 每 个 CLR 属 性 都 包装 着 一 个 非 静 态 的 字段 (或 者 说 由 一 个 非 静 态 
的 字段 在 后 台 文 持 ) ， 思 考 这 样 一 个 问题 : TextBox 有 138 个 属性 ， 假 
设 每 个 CLR 属 性 都 包装 着 一 个 4 字 节 的 字段 ， 如 果 程 序 运行 的 时 候 创 建 
了 10 列 1000 行 的 一 个 TextBox 列 表 ， 那 么 这 些 字 有 段 将 占用 
4*138*10*1000x5.26M 内 存 ! 在 这 一 百 多 个 属性 中 ， 最 常用 的 也 就 是 
Text 属 性 ， 这 就 意味 着 大 多 数 内 存 都 会 被 浪费 掉 。 


怎样 避免 这 种 浪费 呢 ? 让 我 们 思考 现实 世界 中 的 一 个 问题 : 一 个 登山 
队员 ， 他 的 全 套 竣 备 有 很 多 ， 包 括 登 山 服 、 有 登山 肤 、 有 登山 杖 、 护 目 
镜 、 绳 索 、 无 线 电 、 水 、 食 品 甚至 还 有 氧气 瓶 等 。 倘 大 是 去 登 珠 称 朗 
玛 峰 ， 这 些 装备 需要 都 带 上 ， 要 是 去 登 香山 呢 ? WREEF EAMES 
DER! 所 以 ， 实 际 一 点 的 办 法 是 一 一 用 得 着 束 训 上， 用 不 着 束 不 
市 ， 有 必要 的 时 候 可 以 借 别 人 的 用 一 下 。 


其 实 ， 这 就 是 WPF 中 依赖 属性 的 原理 。 传 统 的 .NET 开 发 中 ， 一 个 对 象 

所 占用 的 内 存 空 间 在 调用 new 操 作 符 进行 实例 化 的 时 候 就 已 经 决定 了 ， 

而 WPF 人 允许 对 象 在 被 创建 的 时 候 并 不 包含 用 于 存储 数据 的 空间 ( 即 字 

段 所 占用 的 空间 ) 、 只 保留 在 需要 用 到 数据 时 能 够 获得 默认 值 、 借 用 

其 他 对 象 数 据 或 实时 分 配 空 间 的 能 力 一 一 这 种 对 象 束 称 为 依赖 对 象 
(Dependency Object) 而 它 这 种 实时 获取 数据 的 能 力 则 依靠 依赖 属性 
(Dependency Property) 来 实现 。WPF 开 发 中 ， 必 须 使 用 依赖 对 象 作为 

EUR Tes 使 二 者 结合 起 来 ， 才 能 形成 完整 的 Binding 目 标 被 数 

DX] o 


在 WPF 系 统 中 ， 依 赖 对 象 的 概念 被 DependencyObject 类 所 实现 ， 依 赖 属 
性 的 概念 则 由 DependencyProperty 类 所 实现 。DependencyObject 具 有 
GetValue 和 SetValue 两 个 方法 : 


public class DependencyObject : DispatcherObject 


| 
l 


public object GetValue(DependencyProperty dp) 


public void SetValue(DependencyProperty dp, object value) 


这 两 个 方法 都 以 DependencyProperty 对 象 为 参数 ，GetValue 方 法 通过 
DependencyProperty 对 象 获 取 数 据 ;SetValue 通 过 DependencyProperty 对 
5x d£ fii (fü —— E X Pj ^^ 7j; 1E 把 DependencyObject 和 
DependencyProperty 紧 密 结合 在 一 起 » 


DependencyObject 是 WPF 系 统 中 相当 故 层 的 一 个 基 类 ， 如 图 7-5 所 示 。 
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图 7-5 ”DependencyObject 继 承 树 

从 这 棵 继承 树 上 可 以 看 出 ，WPF 的 所 有 UI 控件 都 是 依赖 对 象 。WPF 的 
类 库 在 设计 时 充分 利用 了 依赖 属性 的 优势 ，UI 控 件 的 绝 大 多 数 属性 都 
已 经 依赖 化 了 。 

7.2.2 ”声明 和 使 用 依赖 属性 

本 小 市 我 们 使 用 一 个 人 简单 的 实例 来 说 明 依 赖 属性 的 使 用 方法 。 

完 准备 好 一 个 界面 : 


«Window x:Class-"WpfApplicationl. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"DependencyProperty" Height-"] 35" Width-"260"» 

<StackPanel> 
<TextBox x:Name-"textBox 1" BorderBrush="Black" Margin="$" /> 
<TextBox x:Name="textBox2" BorderBrush-"Black" Margin="$" /> 
«Button Content="OK" Margin-"5" Click-"Button Click" /> 
«/StackPanel» 
</Window> 


运行 效果 如 图 7-6 所 示 。 


图 7-6 ”示例 界面 效果 


前 面 已 经 说 过 ，DependencyProperty 必 须 以 DependencyObject 为 宿主 、 
借助 它 的 SetVvalue 和 GetValue 方 法 进行 写 入 与 读 取 。 因 此 ， 想 使 用 目 定 
S. B DependencyProperty, 14 3: — XE Æ DependencyObject H5] YK Æ X ° 
DependencyProperty 实 例 的 声明 特点 很 鲜明 一 一 引用 变量 由 public static 
readonly 三 个 修饰 从 修饰 ， 实 例 并 非 使 用 new 控 作 符 得 到 而 是 使 用 
DependencyProperty.Register 方 法 生成 。 代 码 如 下 : 


public class Student : DependencyObject 
| 
public static readonly DependencyProperty NameProperty = 
DependencyProperty. Register" Name", typeof(string), typeof(Student)); 


这 是 使 用 DependencyProperty 的 最 简 人 代码， 我 们 来 分 析 一 下 : 


首先 ， 如 前 所 述 ，DependencyProperty 一 定 使 用 在 DependencyObject 
里 ， 所 以 Student 派 生 自 DependencyObject 类 。 


其 次 ， 使 用 DependencyProperty 声 明 的 成 员 变 量 同时 被 public static 
readonly 三 个 修饰 符 修 饰 。 在 这 里 我 们 直到 一 个 命名 约定 一 一 成 员 变 量 
的 名 字 需 要 加 上 Property 后 级 以 表明 它 是 一 个 依赖 属性 。 我 们 打算 用 这 
个 依赖 属性 存 学 生 的 姓名 ， 所 以 把 它 命 名 为 NameProperty。 


再 次 ， 这 个 成 员 变 量 所 引用 的 实例 并 非 使 用 new 操 作 符 得 到 ， 而 是 使 用 
DependencyProperty.Register 方 法 创建 。 现 在 使 用 的 是 这 个 方法 参数 最 
少 、 最 简单 的 一 个 重 载 ， 让 我 们 分 析 一 下 这 3 个 参数 : 


e 第 1 个 参数 为 string 类 型 ， 用 这 个 参数 来 指明 以 哪个 CLR 属 性 作为 这 
个 依赖 属性 的 包装 器 ， 或 者 说 此 依赖 属性 支持 (back) 的 是 哪个 CLR 属 
性 。 目 前 虽然 没有 为 这 个 依赖 属性 准备 包装 器 ， 但 将 来 会 使 用 名 为 
Name 的 CLR 属 性 来 包 半 人 它 ， 所 以 这 个 参数 被 赋值 为 Name。 


e 第 2 个 参数 用 来 指明 此 依赖 属性 用 来 存储 什么 类 型 的 值 ， 学 生 的 姓 
名 是 string 类 型 ， 所 以 是 这 个 参数 被 赋值 为 typeof(string) ° 


e 第 3 个 参数 用 来 指明 此 依赖 属性 的 笨 主 是 什么 类 型 ， 或 者 说 
DependencyProperty.Register 方 法 将 把 这 个 依赖 属性 注册 关联 到 哪个 类 
型 上 。 本 例 中 的 意图 是 为 Student 类 准备 一 个 可 依赖 的 名 称 属性 ， 所 以 
需要 把 NameProperty 注 册 成 与 Student 关 联 ， 因 此 这 个 参数 被 赋值 为 
typeof(Student) ° 


注意 


这 里 有 三 点 需要 注意 : 


(1) 依赖 属性 的 包装 器 (Wrapper) 是 一 个 CLR 属 性 ， 因 为 初学 者 头脑 中 “属性 ”的 概念 就 是 
CLR 属 性 ， 所 以 常常 把 包装 器 误 认 为 是 依赖 属性 ， 而 实际 上 依赖 属性 就 是 那个 由 public static 
readonly 修 饰 的 DependencyProperty 实 例 ， 有 没有 包装 器 这 个 依赖 属性 都 存在 。 


(2) 既然 有 没有 包装 器 依赖 属性 都 存在 ， 那 么 包装 器 是 干什么 用 的 呢 ? 包装 器 的 作用 是 以 “ 实 
例 属性 ”的 形式 向 外 界 暴露 依赖 属性 ， 这 样 ， 一 个 依赖 属性 才能 成 为 数据 源 的 一 个 Path 。 


(3) 注册 依赖 属性 时 使 用 的 第 二 个 参数 是 一 个 数据 类 型 ， 这 个 数据 类 型 也 是 包装 器 的 数据 类 
型 ， 它 的 全 称 应 该 是 “依赖 属性 的 注册 类 型 >»， 但 一 般 情况 下 也 会 把 这 个 类 型 类 型 称 为 “依赖 属 


x 类 型 ” (严格 地 说 ， 依 赖 属性 的 类 型 永远 都 是 DependencyProperty， 只 是 工作 中 叫 习 惯 


理解 了 依赖 属性 声明 变量 和 创建 实例 的 过 程 ， 我 们 就 可 以 洽 试 使 用 它 
了 。 依 赖 属性 下 先是 属性 ， 所 以 我 们 先 笑 试 用 这 个 依赖 属性 来 存储 值 
并 把 值 顺利 读 取出 来 。 
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private void Button. Click(object sender, RoutedEventArgs e) 

| 
Student stu = new Student(); 
stu.SetValue(Student.NameProperty, this.textBox | Text); 
textBox2. Text = (string)stu.GetValue(Student.NameProperty); 

| 


第 一 句 是 创建 一 个 Student 实 例 并 使 用 变量 stu 引 用 ; 第 二 句 是 调用 
SetValue 方 法 把 textBox1.Text 属 性 的 值 存 储 进 依赖 属性 ;第 三 句 是 使 用 
GetValue 方 法 把 值 读 取 出 来 ， 注 意 ，SetValue 的 返回 值 是 object 类 型 ， 所 
以 要 进行 适当 的 类 型 转换 。 如 前 所 述 ，Student 类 的 SetValue 和 GetValue 
方法 继承 目 DependencyObject 类 。 


程序 运行 的 效果 如 图 7-7 所 示 ° 
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图 7-7 ”依赖 属性 使 用 示例 


当 第 一 次 看 到 这 个 例子 的 了 时候， 也 许 会 有 点 百 思 不 得 其 解 的 感觉 一 一 
依赖 属性 是 一 个 static 对 象 ， 哪 怕 有 1000 个 Student 实 例 ， 依 赖 属性 对 象 
也 只 有 一 个 ， 那 么 调用 Setvaule 方 法 时 值 被 存储 到 哪里 去 了 呢 ? 调用 
GetValue 时 值 又 被 从 哪里 读 出 呢 ? mH, readonly KFE E 
不 是 只 读 的 吗 ， 怎 么 可 以 用 来 写 入 值 呢 ? 其 实 这 个 问题 直 指 依赖 属性 
机 制 的 核心 ， 我 们 会 在 下 一 小 节 专 门 讨 论 。 现 在 还 是 请 把 思维 集中 在 
依赖 属性 的 使 用 上 。 


上 面 的 例子 中 ， 依 赖 属性 作为 “属性 ”的 功能 已 经 展现 了 出 来 ， 那 么 ， 
怎样 体现 它 的 “依赖 * 性 呢 ? 让 我 们 看 下 面 这 个 例子 。 先 回顾 一 下 
Binding，Binding 作 为 数据 流动 的 桥架 ， 一 端 是 数据 的 来 源 ， 另 一 端 是 
数据 的 目标 ， 一 般 情 况 下 ， 数 据 的 来 源 是 业务 逻辑 层 的 对 象 而 目标 是 
UI 层 的 控件 。 在 下 面 这 个 例子 中 ， 我 们 暂且 倒 过 来 ， 让 textBox1 作 为 数 
据 来 源 ， 把 Student 实 例 作 为 数据 的 目标 ， 让 Student 实 例 依赖 在 textBox1 
上 。 注 意 : 这 里 仅仅 是 为 了 展示 依赖 属性 的 “依赖 * 功 能 ， 现 实 工 作 中 
几乎 从 来 不 这 么 做 。 


下 面 是 窗口 类 的 后 台 代码 : 


public partial class Windowl : Window 


Student stu; 


public Window!() 
| 
InitializeComponent(); 
stu = new Student(); 
Binding binding = new Binding("Text") | Source = textBoxl j; 


BindingOperations.SetBinding(stu, Student. NameProperty, binding); 


private void Button Click(object sender, RoutedEventArgs c) 


| 
MessageBox.Show(stu.GetValue(Student. NameProperty). ToString()); 


最 核心 的 代码 位 于 构造 器 的 最 后 两 行 ， 先 是 创建 一 个 Binding 的 实例 ， 
让 textBox1 作 为 数据 源 对 象 并 从 其 Text 属 性 中 获取 数据 ， 其 后 一 句 是 使 
用 BindingOperations 类 的 SetBinding 方 法 指定 将 stu 对 象 借助 刚刚 声明 的 
Binding 实 例 依赖 在 textBoxl1 上 。 


当 在 textBox1 里 输入 一 些 字符 并 按 下 OK 按钮 时 会 弹出 对 话 框 显示 依赖 
属性 的 值 如 图 7-8 所 示 。 
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图 7-8 Student 实例 依赖 在 textBoxl 上 


说 实话 ， 这 个 有 后“ 学 院 派 ”的 例子 并 不 怎么 实用 ， 但 通过 它 我 们 要 认 
J 那 就 是 依赖 属性 即使 没有 CLR 属 性 作为 其 外 包装 也 可 以 
1 工作 。 


代码 的 进化 并 没有 结束 。 如 果 我 想 把 textBox1 和 textBox2 关 联 起 来 ， 代 
码 应 该 是 这 样 : 


ns 

Binding binding = new Binding("Text") | Source = textBox1 }; 
textBox2.SetBinding(TextBox. TextProperty, binding); 

hs 


这 里 调用 了 textBox2 的 SetBinding 方 法 ， 这 比 调用 BindingOperations 的 
SetBinding 方 法 以 第 三 人 称 的 视角 将 数据 的 源 与 目标 关联 起 来 感觉 要 上 自 
然 一 些 。 如 果 你 尝试 调用 stu 对 象 的 SetBinding 方 法 ， 你 会 发 现 stu 没 有 这 
个 方法 ， 因 为 DependencyObject 类 (Student 类 的 基 类 ) 没有 这 个 方法 。 
SetBinding 方 法 是 FrameworkElement 类 的 方法 。FrameworkElement 是 个 
相当 高 层 的 类 ， 甚 至 比 UIElement 类 的 层级 还 高 一 一 这 从 侧面 向 我 们 传 
递 了 这 样 一 个 思想 一 一 微软 希望 能 够 SetBinding 〈 即 作为 数据 目标 ) 的 
对 象 是 UI 元 素 。 其 实 ，FrameworkElement 类 的 SetBinding 方 法 并 不 神 
秘 ， 仅 仅 对 BindingOperations 的 SetBinding 方 法 做 了 一 个 简单 的 封装 ， 
代码 如 下 : 


public class FrameworkElement : UIElement // ... 


j 
1 


Il 
public BindingExpressionBase SetBinding(DependencyProperty dp, BindingBase binding) 
| 

retum BindingOperations.SetBinding(this, dp, binding); 


1 
f 


看 完 上 面 儿 个 例子 ， 相 信 大 家 已 经 理解 了 依赖 属性 的 使 用 方法 。 但 现 
在 我 们 使 用 的 依赖 属性 依靠 SetValue 和 GetValue 两 个 方法 进行 对 外 界 的 
暴露 ， 而 且 在 使 用 GetValue 的 时 候 还 需要 进行 一 次 数据 类 型 的 转换 ， 因 
此 ， 天 多 数 情况 下 我 们 会 为 依赖 属性 语 加 一 个 CRL 属 性 外 包 和 天: 


public class Student : DependencyObject 


f 
[ 


I| CLR 属性 包装 器 

public string Name 

{ 
get | return (string)GetValue(NameProperty); } 
set { SetValue(NameProperty, value); } 


public static readonly DependencyProperty NameProperty = 
DependencyProperty.Register("Name", typeof(string), typeof(Student)); 


l 
j 


A T AANCLRE EARR TD EV ARE T : 


private void Button. Click(object sender, RoutedEventArgs c) 
1 
l 

Student stu = new Student(); 

stu.Name = this.textBox1.Text; 

this.textBox2.Text = stu.Name; 


1 
f 


如 果 不 关 心底 层 的 实现 ， 下 游程 序 员 在 使 用 依赖 属性 时 与 使 用 单纯 的 
CLR 属 性 感觉 别 无 二 致 。 


我 们 知道 ， 依 赖 对 象 可 以 通过 Binding 依 赖 在 其 他 对 象 上 ， 即 依赖 对 象 
是 作为 数据 的 目标 而 存在 的 。 现 在 ， 我 们 为 依赖 对 象 的 依赖 属性 添加 
了 CLR 属 性 包装 ， 有 了 这 个 包装 ， 束 相当 于 为 依赖 对 象 准备 了 用 于 骏 
露 数据 的 Binding Path， 也 残 是 说 ， 现 在 的 依赖 对 象 已 经 具备 了 扮演 数 
据 源 和 数据 目标 双重 角色 的 能 力 。 值 得 注意 的 是 ， 尽 管 Student 类 没有 
实现 INotifyPropertyChanged 接 口 ， 当 属性 的 值 发 生 改 变 时 与 之 关联 的 
Binding 对 象 依然 可 以 得 到 通知 ， 依 赖 属性 默认 带 有 这 样 的 功能 ， 天 生 
束 是 合格 的 数据 源 。 


现在 ， 我 们 癌 FrameworkElement 类 借用 一 下 它 的 SetBinding 方 法 、 升 级 
一 下 Student 类 : 


public class Student : DependencyObject 


H 
[ 


Il CLR 属性 包装 器 

public string Name 

| 
get | return (string)GetValue(NameProperty); } 
set { SetValue(NameProperty, value); } 


I| 依赖 属性 
public static readonly DependencyProperty NameProperty = 
DependencyProperty.Register(" Name", typeof(string), typeof(Student)); 


|I SetBinding 包装 
public BindingExpressionBase SetBinding(DependencyProperty dp, BindingBase binding) 


| 
retum BindingOperations.SetBinding(this, dp, binding); 


然后 ， 我 们 使 用 Binidng 把 Student 对 象 关 联 到 textBox1 上 ， 再 把 textBox2 
关联 到 Student 对 象 上 形成 Binding 链 。 代 码 如 下 : 


public Window10) 


J 
1 


InitializeComponent(); 

stu = new Student(); 

stu.SetBinding(Student. NameProperty, new Binding(" Text") { Source = textBox1 ]); 
textBox2.SetBinding(TextBox. TextProperty, new Binding("Name") | Source = stu }); 


运行 程序 ， 当 在 textBoxl 中 输入 字符 的 时 候 ，textBox2 束 会 同步 显示 。 
当然 ， 此 时 Student 对 象 的 Name 属 性 值 也 同步 变化 了 。 


注意 


最 后 ， 向 大 家 介绍 一 个 小 技巧 。 在 一 个 类 中 声明 依赖 属性 时 并 不 需要 手动 进行 声明 、 注 册 并 使 
CLR 属 性 封装 ， 只 需要 输入 propdp，Visual Studio 2008 的 提示 列表 中 会 有 一 项 高 亮 显 示 ， 这 
时 连 按 两 次 Tap 链 一 个 标准 的 依赖 属性 ( 带 CLR 属 性 包装 ) 就 声明 好 了 ， 继 续 按 动 Tab 链 ， 可 
以 在 提示 环境 中 修改 依赖 属性 的 各 个 参数 。 这 个 功能 称 为 snippet ( 称 为 代码 模板 或 代码 片 
pu EE Studio 所 有 非 简化 版 本 自 带 的 功能 ， 多 多 掌握 这 个 功能 可 以 极 大 地 提高 编码 速 
度 并 降低 错误 率 。 


由 snippet 自 动 生 成 的 代码 中 ，DependencyProperty.Register 使 用 的 是 带 4 
个 参数 的 重 载 ， 前 前 3 个 参数 = 与 我 们 前 EU 面 介 绍 的 一 St. 第 4 个 参数 的 类 型 
是 PropertyMetadata 类 。 第 4 个 参数 的 作用 是 给 依赖 属性 的 
DefaultMetadata 属 性 赋值 。 顾 名 思 x. DefaultMetadata ft) 作用 是 器 依赖 
属性 的 调用 者 提供 一 些 基本 信息 ， 这 些 信息 包括 : 


e CoerceValueCallback: 依赖 属性 值 被 强制 改变 时 此 委托 会 补 调 用 ， 
此 委托 可 关联 一 个 影响 函数 。 


e  DefaultValue: 依赖 属性 未 被 显 式 赋值 时 ， 者 读 取 之 则 获得 此 默认 
值 ， 不 设 此 值 会 抛 出 异 稼 。 


e IsSealed: 控制 PropertyMetadata 的 属性 值 是 否 可 以 更 改 ， 默 认 值 为 


true ? 


e  PropertyChangedCallback: 依赖 属性 的 值 被 改变 之 后 此 委托 会 被 调 
用 ， 此 委托 可 关联 一 个 影响 函数 。 


注意 


需要 注意 的 是 ， 依赖 属性 的 DefaultMetadata 只 外 能 通 i Register77 1 法 的 第 4 个 参数 进行 赋值 ， 而 且 
一 旦 赋值 就 不 能 改变 (DefaultMetadata 是 个 只 读 属 性 ) 。 如 果 想 用 新 的 PropertyMetadata 替 换 这 
个 默认 的 Metadata， 需 要 使 用 DependencyProperty. 


7.2.3 ”依赖 属性 值 存 取 的 秘密 


回 到 前 面 那个 问题 一 一 调用 依赖 对 象 的 SetValue 方 法 时 ， 值 被 存储 到 哪 
ET? 因为 依赖 对 象 的 依赖 属性 是 一 个 static 对 象 ， 所 以 值 不 可 能 是 保 
存在 这 个 对 象 里 ， 不 然 几 百 个 实例 都 进行 赋值 时 到 接应 该 保存 哪个 、 


AURA? 显然 ，WPF 有 一 仅 机 制 来 存 取 依赖 属性 的 值 。 下 面 就 让 我 
们 来 剖析 一 下 。 


回想 前 面 学 习 的 内 容 ， 不 难 发 现 依赖 属性 的 使 用 大 致 分 为 两 个 步 又 : 
第 一步， 在 DependencyObject 派 生 类 中 声明 public static 1% vii BJ 
DependencyProperty 成 员 变 量 ， 并 使 用 DependencyProperty.Register 方 法 

(而 不 是 new 操 作 符 ) 获得 DependencyProperty 的 实例 ; 第 二 步 ， 使 用 
DependencyObject H SetValue #4 GetValue F YE ` 1# B DependencyProperty 
SE d ok Té HO o D. dedi emsusSmxsm8sO- 
DependencyProperty.Register 7; 法 和 DependencyObject.SetVaule 77 法 和 
DependencyObject.GetValue77 1& ° 


先 来 研究 DependencyProperty.Register 方 法 。 顾 名 思 义 ， 这 个 方法 不 仅 
要 创建 DependencyProperty 实 例 ， 还 要 对 它 进 行 “注册 ”。 这 样 问题 吏 来 
DependencyProperty 实 例 被 注册 到 哪里 了 呢 ? 


阅读 源码 ， 你 会 发 现 DependencyProperty 类 具有 这 样 一 个 成 员 : 


private static Hashtable PropertyFromName = new Hashtable(J; 


显然 ， 一 旦 程序 运行 ， 束 会 有 这 样 一 个 全 局 的 Hashtable 存 在 ， 这 个 
Hashtable 就 是 用 来 注册 DependencyProperty 实 例 的 地 方 。 


在 源码 中 ， 所 有 的 DependencyProperty.Register 方 法 重 载 最 后 都 归结 大 
对 DependencyProperty. RegisterCommon 方法 的 调用 (可 以 把 
RegisterCommon 理 解 为 Register 方 法 的 “完整 版 ”) 。RegisterCommon 方 
法 的 原型 如 下 : 


private static DependencyProperty RegisterCommon 
( 

string name, 

Type propertyType, 

Type ownerType, 

PropertyMetadata defaultMetadata, 

Validate ValueCallback validate ValueCallback 


可 以 看 出 ，RegisterCommon 方 法 的 前 4 个 参数 与 我 们 前 面 分 析 过 的 
v ERO o 下 面 束 让 我 们 研究 一 下 这 个 方法 如 何 探 作 它 的 参 


在 刚刚 进入 方法 的 时 候 你 会 看 到 这 样 一 句 : 


FromNameKey key = new FromNameKey(name, ownerType); 
FromNameKey 是 一 个 NET Framework 内 部 数据 类 型 。 它 的 构造 器 代码 如 下 : 
public FromNameKey(string name, Type ownerType) 


/ 
l 


_name = name; 
_ownerType = ownerType; 
_hashCode = _name.GetHashCode() ^ _ownerType.GetHashCode(); 


并 日 override 有 其 GetHashCode 方 法 : 


public override int GetHashCode() 


Í 
1 


return _hashCode; 


1 
| 


代码 的 意图 一 目 了 然 : FromNameKey 对 象 (也 就 是 变量 key) 的 hash 
code 实 际 上 是 RegisterCommon 第 1 个 参数 (CLR 属 性 名 字符 串 ) 的 hash 
code 与 第 3 个 参数 (宿主 类 型 ) 的 hash code 做 异 或 运算 得 来 的 。 这 样 操 
作 ， 每 对 “CLR 属 性 名 一 答 主 类 型 * 所 决定 的 DependencyProperty 实 例 就 
是 唯一 的 。 所 以 ， 在 RegisterCommon 方 法 里 会 发 现 这 样 的 代码 : 


if (PropertyFromName.Contains(key)) 


j 
1 


throw new ArgumentException(SR.Get(SRID.PropertyAlreadyRegistered, name, ownerType.Name)); 


1 
j 
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行 注 册 ， 程 序 会 抛 出 异常 。 


: 


接 下 来 ，RegisterCommon 检 得 程序 员 是 否 提供 了 PropertyMetadate ， 如 
果 没 有 提供 3u 为 之 准备 一 个 默认 的 PropertyMetadate 实 例 。 当 所 有 “ 原 
都 准备 妥当 、 没 有 问题 后 ，DependencyProperty 的 实例 被 创建 出 


DependencyProperty dp = new DependencyProperty(name, property Type, ownerType, defaultMetadata, validate ValueCallback); 


并 且 被 注册 进 Hashtable 中 〈Hashtable 会 和 目 动 调用 key 的 GetHashcode 方 法 
获取 其 hash code) : 


PropertyFromName[key] = dp; 


读 到 这 里 ， 我 们 可 以 用 一 句 话 概括 DependencyProperty 对 象 的 创建 与 注 
册 ， 那 就 是 : 创建 一 个 DependencyProperty 实 例 并 用 它 的 CLR 属 性 名 和 
特 主 类 型 名 生成 hash code ， 最 后 把 hash code 和 DependencyProperty 实 例 
作为 Key-Value 对 存 入 全 局 的 、 名 为 PropertyFromName 的 Hashtable 中 。 
这 样 ，WFP 属 性 系统 通过 CLR 属 性 名 和 答 主 类 型 名 就 可 以 从 这 个 全 局 
的 Hashtable 中 检索 出 对 应 的 DependencyProperty 实 例 。 


最 后 ， 生 成 的 DependencyProperty 实 例 被 当 作 返回 值 交 还 


return dp; 


注意 


有 一 点 需要 注意 : 把 DependencyProperty 实 例 注 册 进 全 局 Hashtable 时 使 用 的 key 由 CLR 
希 值 和 宿主 类 型 哈 希 值 经 过 运算 得 到 ， 但 这 并 不 是 DependencyProperty 实 例 rd 。 每 个 


DependencyProperty 2 列 都 具有 一 个 名 为 GlobalIndex 的 int 类 型 属性 ，GlobalIndex 的 值 
些 算法 处 理 得 到 的 ， 确 保 了 每 个 DependencyProperty 实 例 的 GlobalIndex 是 唯一 的 o 
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并 且 ，DependencyProperty 的 GetHashCode 方 法 亦 被 重 写 : 


public override int GetHashCode() 
1 
l 


retum Globallndex; 
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这 一 点 非常 重要 ， 因 为 通过 这 个 值 就 可 以 直接 检索 到 某 个 
DependencyProperty 实 例 。 


至 此 ， 一 个 DependencyProperty 实 例 已 经 被 创建 并 注册 进 一 个 全 局 的 
Hashtable 中 ， 下 面 就 要 使 用 DependencyObject 的 SetValue 和 GetValue 借 
助 这 个 DependencyProperty 实 例 保 存 和 读 取 值 了 。 我 们 先 来 看 相对 比较 
简单 的 GetValue 方 法 ， 它 的 代码 如 下 : 


public object GetValue(DependencyProperty dp) 
| 
1 


this. VerifyAccess(); 


if (dp == null) 
Í 
t 


throw new ArgumentNullException("dp"); 


/| Call Forwarded 
return GetValueEntry( 
LookupEntry(dp.GlobalIndex), 
dp, 
null, 
RequestFlags.FullyResolved). Value; 


l 
Í 
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EntryIndex entryIndex = LookupEntry(dp.Globallndex); 
EffectiveValueEntry valueEntry  GetValueEntry(entryIndex, dp, null, RequestFlags.FullyResolved) 
return valueEntry, Value; 


在 这 几 名 代码 中 屡次 出 现 了 Entry 这 个 词 ，Entry 是 “入 口 ” 的 意思 。WPF 
的 依赖 属性 系统 在 存放 值 的 时 候 会 把 每 个 有 效 值 存放 在 一 个 “小 房 
间 *” 里 ， 每 个 “小 房间 ”都 有 目 己 的 入 口 检索 算法 只 要 找到 这 个 入 
口 、 走 进入 口 就 能 拿 到 依赖 属性 的 值 。 这 里 说 的 “小 房间 ”实际 上 就 是 
EffectiveValueEntry 类 的 实例 。EffectiveValueEntry 的 所 有 构造 器 都 包 合 
一 个 DependencyProperty 类 型 的 参数 ， 换 句 话 说， A 
EffectiveValueEntry 都 天 HX 着 一 个 DependencyProperty 
EffectiveValueEntry 类 具有 一 个 名 为 PropertyIndex 的 属性 ， 这 个 属性 的 值 
实际 上 就 是 与 之 关联 的 DependencyProperty 的 GlobalIndex 必 性 值 (这 个 
值 的 由 来 我 们 在 前 面 已 经 详细 讨论 过 ) 。 


在 DependencyObject 类 的 源码 中 可 以 找到 这 样 一 个 成 员 变 量 : 


private EffectiveValueEntry[] _effectiveValues; 


这 个 数组 依 每 个 成 员 的 PropertyIndex 属 性 值 进行 排序 ， 对 这 个 数组 的 操 
作 (如 插入 、 删 除 和 排序 等 ) 由 专门 的 算法 来 完成 。 正 是 这 个 数组 癌 
我 们 提示 了 依赖 属性 存储 值 的 秘密 每 个 DependencyObject 实 例 都 自 
带 一 个 EffectiveValueEntry 类 型 数组 (你 可 以 把 它 理解 为 一 排 可 以 随时 
扩建 的 “小 房间 *) ， 当 某 个 依赖 属性 的 值 要 被 读 取 上 时， 算法 就 会 从 这 
个 数组 中 去 检索 值 ， 如 果 数 组 中 没有 包含 这 个 值 ， 算 法 会 返回 依赖 属 
性 的 默认 值 (这 个 值 由 依赖 属性 的 DefaultMetadata 来 提供 ) 。 至 此 ， 我 
们 明白 了 一 件 事 情 ， 那 束 是 被 static 关 键 字 所 修饰 的 依赖 属性 对 象 其 作 
用 是 用 来 检索 真正 的 属性 值 而 不 是 存储 值 ， 被 用 做 检索 键 值 的 实际 上 
是 依赖 属性 的 GlobalIndex 属 性 (本 质 是 其 hash code， 而 hash code X. H 
其 CLR 包 装 器 名 和 宿主 类 型 名 共同 决定 ) ， 为 了 保证 GlobalIndex 属 性 
值 的 稳定 性 ， 我 们 声明 的 时 候 又 使 用 了 readonly 关 键 字 进行 修饰 。 


实际 工作 中 ， 依 赖 属性 的 值 除 了 可 能 存储 在 EffectiveValueEntry 数 组 或 
由 默认 值 提 供 外 ， 还 有 很 多 途径 可 以 获得 ， 可 能 来 自 于 元 素 的 Style 或 
Theme， 也 可 能 由 上 层 元 素 继承 而 来 ， 还 可 能 是 在 某 个 动画 过 程 的 控制 


下 不 断 变 化 而 来 。 我 们 怎么 知道 获取 的 值 来 目 于 哪里 呢 ? 原来 ，WPF 
对 依赖 属性 值 的 读 取 是 有 优 移 级 控制 的 ， 由 移 到 后 依次 是 : 


) WPF 属 性 系统 强制 值 。 

) 由 动画 过 程控 制 的 值 。 

(3) 本 地 变量 值 (存储 在 EffectiveValueEntry 数 组 中 ) 。 
) 由 上 级 元 素 的 Template 设 置 的 值 。 

) 由 隐 式 样式 (Implicit Style) 设置 的 值 。 

) 由 样式 之 触发 器 (Style Trigger) 设置 的 值 。 
(7) 由 模板 之 触发 器 (Template Trigger) 设置 的 值 。 
) 
) 


由 样式 之 设置 器 (Style Setter) 设置 的 值 。 


由 默认 样式 (Default Style) 设置 的 值 ， 默 认 模 式 其 实 就 是 由 主题 
(Theme) 指定 的 模式 。 


(10) 由 上 级 元 素 继 承 而 来 的 值 。 

(11) 默认 值 ， 来 源 于 依赖 属性 的 元 数据 (metadata) 。 
理解 了 GetValue 方 法 ，SetValue 方 法 也 不 再 神秘 。 
进入 这 个 方法 后 ， 首 和 完 验 证 依赖 属性 的 值 是 否 可 以 被 改变 ， 如 果 不 能 
则 抛 出 异常 ， 如 果 可 以 束 进 入 后 面 的 赋值 流程 。 赋 值 流程 也 很 简单 ， 
主要 有 这 样 几 个 操作 : 
e 检查 值 是 不 是 DependencyProperty.UnsetValue， 如 果 是 ， 说 明 调用 者 
的 意 i OR 的 值 。 此 时 程序 会 调用 ClearValueCommon 方 法 来 清 
空 现 有 的 值 。 


e 检查 EffectiveValueEntry 数 组 中 是 否 已 经 存在 相应 依赖 属性 的 位 置 ， 
如 果 有 则 把 旧 值 改写 为 新 值 ， 如 果 没 有 则 新 建 EffectiveValueEntry 对 象 


并 存储 新 值 。 这 样 ， 只 有 被 用 到 的 值 才 会 被 放 进 这 个 列表 ， 借 此 ， 
WPF 系 统 用 算法 (时 间 ) 换取 了 对 内 存 (空间 ) 的 节省 。 


e 调用 UpdateEffectiveValue 对 新 值 做 一 些 相 应 处 理 。 


DependencyObject 和 DependencyProperty 两 个 类 是 WPEF 属 性 系统 的 核 
心 ， 本 小 的 设立 是 为 了 帮助 大 家 理解 它们 之 间 的 关系 以 及 依赖 属性 
值 设置 、 读 取 的 和 商 要 流程 。 通 过 这 一 人 小玉 的 描述 ， 布 望 大 家 能 理解 
WPF 系 统 的 设计 理念 ， 即 以 public static 类 型 的 变量 作为 标记 并 以 这 个 
标记 为 索引 进行 对 象 的 存储 、 访 问 、 修 改 、 删 除 等 操作 。 这 样 的 理念 
在 传统 的 .NET 开 发 体系 中 (如 Windows Forms、ASPNET 等 ) 是 不 曾 出 
现 的 ， 它 是 WPF 体 系 的 创新 并 且 广 泛 应 用 (后 面 的 路 由 事件 、 命 令 系 
统 等 都 会 用 到 这 样 的 理念 ) 。 同 时 ， 我 们 也 可 以 理解 为 什么 WPF 在 性 
微软 也 在 不 停 地 完善 这 个 机 制 ， 使 它 的 效率 进 一 
De ps 


7.3 ”附加 属性 (Attached Properties) 


理解 了 依赖 属性 后 ， 再 来 讨论 一 下 附加 属性 。 顾 名 思 义 ， 附 加 属性 是 
说 一 个 属性 本 来 不 属于 某 个 对 象 ， 但 由 于 某 种 需求 而 被 后 来 附加 上 。 
也 就 是 把 对 象 放 入 一 个 特定 环境 后 对 象 才 具有 的 属性 〈 表 现 出 来 就 是 
被 环境 赋予 的 属性 ) 就 称 为 附加 属性 (Attached Properties) 。 实 际 开 
发 工作 中 我 们 经 党 会 遇 到 这 样 的 情况 ， 比 如 有 一 个 名 为 Human 的 类 ， 

它 有 可 能 被 与 学 校 相 关 的 工作 流 用 到 〈 记 录 它 的 专业 、 班 级 、 年 
级 ) ， 也 有 可 能 被 与 公司 相关 的 工作 流 用 到 (记录 它 的 部 门 、 项 
目 ) ， 那 么 ， 设 计 类 的 时 候 我 们 是 不 是 需要 这 样 做 呢 : 


public class Human 


public int Id { get; set; ] 


// For school workflow 

public int Majorld { get; set; } 
public int ClassId | get; set; } 
public int Gradeld { get; set; | 


// For company workflow 
public int Departmentld { get; set; } 
public int Projectld { get; set; } 


1 
j 


显然 这 样 做 不 太 合 适 ， 因 为 一 且 流 程 有 所 改变 ， 这 个 类 的 实现 就 需 
做 改动 ， DECENT PE 能 被 关闭 。 而 且 ， 如 果 某 些 Human 类 
型 的 实例 只 用 于 与 公 \ 司 相关 的 流程 #64 FK: Majorld ` ClassId ` GradeId 
属性 所 占用 的 内 存 束 被 浪费 了 。 


再 回想 一 下 学 习 布局 时 过 到 的 例子 。 如 采 在 Grid 里 对 一 个 TextBox 定 
位 ， 代 码 会 是 这 样 : 


«Grid ShowGridLines-"True" 
«Grid.ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefinition /> 
«ColumnDefinition /> 
«/Grid.ColumnDefinitions» 
«Grid. RowDefinitions? 
<RowDefinition /> 
<RowDefinition /> 
<RowDefinition > 
</Grid.RowDefinitions> 


<TextBox Background="Lime" Grid.Column="1" Grid,Row="1" /> 
</Grid> 


运行 效果 如 图 7-9 所 示 。 


图 7-9 ”运行 效果 


如 果 TextBox 被 放置 在 Canvas 里 ， 则 代码 会 是 这 样 : 


<Canvas Margin="10"> 
«TextBox Background-"Lime" Width="200" Canvas.Top="0" /> 
«TextBox Background="Lime" Width="200" Canvas,Top="30" /> 


«TextBox Background-"Lime" Width="200" Canvas.Top="60" /> 
«/Canvas? 


运行 效果 如 图 7-10 所 示 。 


图 7-10 “运行 效果 


放 在 DockPanel 里 ， 代 码 会 是 这 样 : 


«DockPanel LastChildFill="False"> 
«TextBox Background-"Orange" DockPanel.Dockz" Top" /> 
«TextBox Background-"Orange" DockPanel.Dockz" Bottom" /> 
«TextBox Background-" Green" Width-"80" DockPanel.Dockz" Left" /> 
«TextBox Background-" Green" Width-"80" DockPanel.Dockz" Right" /> 
</DockPanel> 


运行 效果 如 图 7-11 所 示 。 


图 7-11 ”运行 效果 


放 在 StackPanel 里 最 省 事 : 


SStackPanel Margin" 10,5"» 
«TextBox Background" LightBlue" Margin-"0,5" /> 
«TextBox Background-"LightBlue" Margin-"0,5" /> 
«TextBox Background-"LightBlue" Margin-"0,5" /> 
</StackPanel> 


运行 效果 如 图 7-12 所 示 。 


8 ' Layout 


图 7-12 ”运行 效果 


作为 TextBox 探 件 的 设计 者 ， 他 不 可 能 知道 控件 发 布 后 程序 员 是 把 它 放 
在 Grid 里 还 是 Canvas 里 (甚至 是 以 后 版 本 将 推出 的 新 布局 里 ; ， 所 以 他 
也 不 可 能 为 TextBox 准 备 诸 如 Column、Row 或 者 Left、Top 这 类 属性 ， 那 
么 干脆 让 布局 来 决定 一 个 TextBox 用 什么 属性 来 设置 它 的 位 置 吧 ! NU 
Grid 里 就 让 Grid 为 它 附 加 上 Column 和 Row 属性 ， 放 在 Canvas 里 就 让 
Canvas 为 它 附 加 上 Top、Left 等 属性 ， 放 在 DockPanel 里 束 让 DockPanel 
为 它 附 加 Dock 必 性。 可见 ， 附 加 属性 的 作用 葡 是 将 属性 与 数据 类 型 
(宿主 ) 解 而 ， 让 数据 类 型 的 设计 更 加 灵活 。 


理解 了 附加 属性 的 含义 ， 我 们 开始 研究 附加 属性 的 声明 、 注 册 和 使 
用 。 附 加 属性 的 本 质 就 是 依赖 属性 ， 二 者 仅 在 注册 和 包装 器 上 有 一 点 
区 别 。 前 面 说 过 ，Visual Studio 2008 用 于 快速 创建 依赖 属性 的 snippet 是 
propdp ， 现 在 我 们 要 使 用 另 一 个 snippet 是 propa， 这 个 snippet 用 于 快速 
创建 附加 属性 。 以 人 在 学 校 里 会 获得 年 级 和 班级 两 个 属性 为 例 ， 我 们 
来 体验 目 定 义 附 加 属性 。 


人 放 在 学 校 里 会 获得 年 级 和 班级 两 个 属性 说 明年 级 和 班级 两 个 属性 
由 学 校 附加 给 和 的， 因此， 这 两 个 属性 的 真实 所 有 者 MWE) 应 该 


Qm gu 


学 校 。 我 们 准备 一 个 名 为 School 的 类 ， 并 让 它 继 承 DependencyObject 
类 ， 然 后 把 光标 定位 于 类 体 中 〈 花 括号 之 间 ) ， 输 入 propa， 当 Visual 
Studio 2008 的 代码 提示 列表 高 亮 显示 时 (如 图 7-13 所 示 ) 连 按 两 下 Tab 
键 ， 一 个 附加 属性 的 框架 就 准备 好 了 “。 继 续 按 动 Tab 键 可 以 在 几 个 空缺 
间 轮 换 并 修改 ， 直 至 按 下 Enter 键 。 


class School: DependencyObject 
í 
propa] 


| 区 Processinput£ventHandler ^ 


2$ ProgressBar 

司 prop 

S] propa a — 
司 propdp 

{} Properties - 


[7-13 Visual Studio 2008 的 Snippet 功 能 


下 面 的 代码 是 做 好 “ 完 型 填空 ”的 附加 属性 : 


class School ; DependencyObject 


public static int GetGrade(DependencyObject obj) 
| 


retum (int)obj.GetValue(GradeProperty); 


public static void SetGrade(DependencyObject obj, int value) 
i 
t 


obj.SetValue(GradeProperty, value); 


public static readonly DependencyProperty GradeProperty = 
DependencyProperty.RegisterAttached("Grade", typeof(int), typeof(School), new UlPropertyMetadata(0)); 


可 以 很 明显 地 看 出 ，GradeProperty 就 是 一 个 DependencyProperty 类 型 成 
员 变 量 ， 声 明 时 一 样 使 用 public static readonly 三 个 关键 字 共 同 修 饰 。 唯 
一 的 不 同 就 是 注册 附加 属性 使 用 的 是 名 为 RegisterAttached 的 方法 ， 但 
参数 却 与 使 用 Register 方 法 无 异 。 附 加 属性 的 包装 铝 也 与 依赖 属性 不 同 
一 一 依赖 属性 使 用 CLR 属 性 对 GetValue 和 SetValue 两 个 方法 进行 包装 ， 
附加 属性 则 使 用 两 个 方法 分 别 进行 包装 一 一 这 样 做 完全 是 为 了 在 使 用 
的 时 候 保持 语句 行文 上 的 通畅 。 


如 何 消费 School 的 GradeProperty 呢 ? 首先 ， 我 们 要 准备 一 个 派生 目 
DependencyObject、 名 为 Human 的 类 : 


class Human : DependencyObject 


f 
1 


l 
j 
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private void Button. Click(object sender, RoutedEventArgs e) 
| 
Human human = new Human(); 
School.SetGrade(human, 6); 
int grade = School. GetGrade(human); 
MessageBox.Show(grade.ToString()); 
| 


运行 程序 并 单 击 按钮 ， 效 果 如 图 7-14 所 示 。 


图 7-14 ”运行 效果 


副 析 .NET Framework 产 码 ， 你 会 发 现 这 一 过 程 与 前 面 依赖 属性 你 存 值 


HA SEE] 76 — S — 9148 01 TA TCU TE E Human Sz fl] B] EffectiveValueEntry 
数组 里 ， 只 是 用 于 在 数组 里 检索 值 的 依赖 属性 〈 即 附加 属性 ) 并 不 以 


Human K 3: Tf x ef fü fESchool2S H., ARXAMA 2 RE— RIE 
CLRJ& HZ TE 3-257869 HHE hash code 和 GlobalIndex ° 


让 我 们 回 到 现实 工作 中 ， 看 看 如 何 把 下 面 这 段 XAML 代 码 改 写成 等 效 
的 C# 代 码 : 


«Grid ShowGridLines-"True"» 
«Grid.ColumnDefinitions» 
«ColumnDefinition /> 
«ColumnDefinition /> 
«ColumnDefinition /> 
«/Grid.ColumnDefinitions» 
«Grid.RowDefinitions* 
«RowDefinition /» 
<RowDefinition /> 
<RowDefinition /> 
«JGrid.RowDefinitions» 
«Button Content-"OK" Grid.Columnz"1" Grid.Rowz"1" /> 
</Grid> 


与 之 等 效 的 C# 代 码 是 : 


public Window! () 
| 


InitializeComponent(); 


J| 在 构造 器 中 调用 


InitializeLayout(); 


private void InitializeLayout() 


i 
Grid grid = new Grid() { ShowGridLines = true }; 


grid.ColumnDefinitions.Add(new ColumnDefinition()); 
grid.ColumnDefinitions.Add(new ColumnDefinition()); 
grid.ColumnDefinitions.Add(new ColumnDefinition()); 


grid.RowDefinitions.Add(new RowDefinition()); 
grid.RowDefinitions.Add(new RowDefinition()); 
grid. RowDefinitions.Add(new RowDefinition()); 


Button button = new Button() | Content = "OK" i; 
Grid.SetColumn(button, 1); 
Grid.SetRow(button, 1); 
grid.Children.Add(button); 


this.Content = grid; 


运行 效 末 如 图 7-15 所 示 。 


图 7-15 “运行 效果 


现在 我 们 已 经 知道 如 何在 XAML 和 C# 代 码 中 直接 为 附加 属性 赋值 ， 不 
过 别 瑟 了 ， 附 加 属性 的 本 质 是 依赖 属性 一 一 附加 属性 也 可 以 使 用 
Binding 依 赖 在 其 他 对 象 的 数据 上 。 请 看 下 面 这 个 例子 : 窗 体 使 用 
Canvas 布 局 ， 两 个 Slider 用 来 控制 矩形 在 Canvas 中 的 横 纵 坐标 。 程 序 的 
效果 如 图 7-16 所 示 。 


图 7-16 ”运行 效果 


实现 这 个 需求 的 XAML 代 码 如 下 : 


«Canvas 

«Slider x: Name-"sliderX" Canvas.Top-" 10" Canvas.Left-" 10" Width-"260" 
Minimum-" 50" Maximum-"200" /> 

«Slider x: Name-"sliderY" Canvas.Top-"40" Canvas.Left-" 10" Width-"260" 
Minimum-" 50" Maximum-"200" /> 

«Rectangle x:Name-"rect" Fill-"Blue" Width-"30" Height-"30" 
Canvas.Leftz" (Binding ElementNamezsliderX, PathzValue]" 
Canvas. Topz" (Binding ElementNamezsliderY, PathzValue]" /> 


«/ Canvas 
与 之 等 效 的 C# 代 和 码 为 〈 仅 Binding 部 分 ) 


public Window10) 


| 
1 


InitializeComponent(); 
// WE. Binding 


this.rect.SetBinding(Canvas.LeftProperty, new Binding(" Value") | Source = sliderX }); 
this.rect.SetBinding(Canvas. TopProperty, new Binding(" Value") | Source = sliderY |); 


由 此 可 见 ， 在 使 用 Binding 时 除了 宿主 类 型 稍 有 不 同 外 没有 任何 区 别 。 
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深入 浅 出 话 事件 


忠 像 属性 系统 在 WPF 中 得 到 升级 、 进 化 为 依赖 属性 一 样 ， 事 件 系 统 在 
WPF 中 也 被 升级 一 一 进化 成 为 路 由 事件 (Routed Event) ， 并 在 其 基础 
P 传递 机 制 。 这 些 机 制 在 很 大 程度 上 减少 了 对 程序 员 的 束 
缚 ， 让 程序 的 设计 和 实现 更 加 有 灵活， 模块 之 间 的 耦合 度 也 进一步 降 
低 。 本 章 就 让 我 们 一 起 来 领略 这 些 新 消息 机 制 的 风采 。 


8.41 近 观 WPF 的 树 形 结构 


路 由 (Route) 一 词 的 大 意 是 这 样 : 起 点 与 终点 间 有 若干 个 中 转 站 ， 从 
起 点 出 发 后 经 过 每 个 中 转 站 时 要 做 出 选择 ， 最 终 以 正确 (比如 最 短 或 
者 最 快 ) 的 路 径 到 达 终 点 。 编 程 的 本 质 是 用 编译 器 (有 了 时 要 借助 类 
库 ) 来 扩展 操作 系统 的 功能 ， 所 以 ， 程 序 的 基本 运行 不 可 能 脱离 操作 
系统 一 一 Windows 本 身 就 是 一 种 消息 驱动 的 操作 系统 ， 所 以 我 们 的 程序 
注定 都 是 消息 驱动 的 ， 程 序 运行 的 时 候 也 要 把 自己 的 消息 系统 与 整个 
操作 系统 的 消息 系统 “连通 ”才能 够 被 执行 和 响应 。 纵 观 几 代 Windows 平 
台 程 序 开发 ， 最 早 的 Windows API 开 发 〈C 语 言 ) 和 MFC 开 发 我 们 可 以 
直接 看 到 各 种 消息 并 可 以 定义 自己 的 消息 ， 到 了 COM 和 VB 时 代 ， 消 息 
被 封装 为 事件 (Even) 并 一 直 沿 用 至 .NET 平 台 开 发 一 ”无 论 怎么 说 ， 
程序 间 模 块 使 用 消息 互相 通信 的 本 质 是 没有 改变 的 。 从 Windows APUT 
发 到 传统 的 .NET 开 发 ， 消 息 的 传递 (或 者 说 事件 的 激发 与 响应 ) 都 是 
直接 模式 的 ， 即 消息 直接 由 发 送 者 交 给 接收 者 (或 者 说 事件 宿主 发 生 
的 事件 直接 由 事件 响应 者 的 事件 处 理 器 来 处 理 ) 。WPF 把 这 种 直接 消 
息 模型 升级 为 可 传递 的 消息 模型 一 一 前 面 我 们 已 经 知道 WPF 的 UI 是 由 
布局 组 件 和 控件 构成 的 树 形 结构 ， 当 这 棵 树 上 的 某 个 结 点 激发 出 某 个 
事件 时 ， 程 序 员 可 以 选择 以 传统 的 直接 事件 模式 让 响应 者 来 响应 之 ， 
也 可 以 让 这 个 事件 在 UI 组 件 树 沿 着 一 定 的 方向 传递 且 路 过 多 个 中 转 结 
点 ， 并 在 这 个 路 由 过 程 中 被 恰当 地 处 理 。 你 可 以 把 WPF 的 路 由 事件 看 
成 是 一 只 小 蚂蚁 ， 它 可 以 从 树 的 基部 向 顶部 (或 反 向 ) HAE T, 
路 过 一 个 树枝 的 分 又 点 就 会 把 消息 带 给 这 个 分 又 点 。 


为 WPF 事 件 的 路 由 环境 是 UI 组 件 树 ， 所 以 我 们 有 必要 仔细 研究 一 下 
JUR 。 


WPF 中 有 两 种 “ 树 ”:， 一 种 叫 逻 辑 树 (Logical Tree) ; 一 种 叫 可 视 元 素 
Pj (Visual Tree) 。 听 起 来 有 点 一 头 雾 水 是 吧 ! 其 实 很 简单 ， 前 面 我 们 
见 到 的 所 有 树 形 结构 都 是 Logical Tree, Logical Tree 最 显著 的 特点 就 是 
它 完全 由 布局 组 件 和 控件 构成 (包括 列表 类 控件 中 的 条 目 元 素 ) ， 换 
句 话说 就 是 它 的 每 个 结 点 不 是 布局 组 件 就 是 控件 。 那 什么 是 Visual Tree 
UE? 我 们 知道 ， 如 果 把 一 片 树叶 放 在 放大 镜 下 观察 ， 你 会 发 现 这 片 叶 
子 也 像 一 棵 * 树 ”一 样 一 -有 自己 的 基部 并 向 上 生长 出 多 级 分 又 。 在 
WPF 的 Logical Tree 上， 充当 叶子 的 一 般 都 是 控件 ， 如 果 我 们 把 WPF 的 
控件 也 放 在 “放大 镜 ”* 下 去 观察 ， 你 会 发 现 每 个 WPF 控 件 本 身 也 是 一 棵 
由 更 细微 级 别 的 组 件 (它们 不 是 控件 ， 而 是 一 些 可 视 化 组 件 ， 派 生 自 
Visual 类 ) 组 成 的 树 。 用 来 观察 WPF 控 件 的 放大 镜 是 我 们 前 面 提 及 的 


Blend， 使 用 Blend 可 以 解 痢 并 观察 一 个 控件 的 模板 (Template) 是 怎样 
的 ， 如 图 8-1 所 示 。 目 前 你 可 以 把 Template 理 解 为 控件 的 骨架 ， 我 们 其 
至 在 保证 控件 功能 不 丢失 的 情况 下 为 控件 换 一 副 新 骨架 ， 让 它 更 漂亮 
(后 面 的 章节 会 详细 讨论 ) 。 


Objects and Timeline 
£. ProgressBarStyle1 (ProgressBar Template) 


» Tempiate 
* iB Background 
DD [Rectangle] 
= [Border] 
** [Border] 
LJ PART Track 
ul Bei 
* i88 Foreground 
L1 Indicator 
L1 Animation 
DD LeftDark 
mE RightDark 
C LeftLight 
DD Centerlight 
口 RightlLight 
i=] Highlight1 


&! Highlight2 
=: [Border] 


图 8-1 ”控件 的 Temlate 


上 图 是 一 个 进度 条 被 拆 解 后 的 显示 。 在 日 常 的 编程 工作 中 ， 进 度 条 总 
是 以 一 个 整体 控件 的 角色 出 现在 Logical Tree 中 发 挥 它 的 作用 。 但 有 时 
候 我 们 也 需要 把 它 拆 解 开 ， 重 新 为 它 设 计 内 部 结构 ， 比 如 我 想 把 一 个 
进度 条 改造 成 一 个 瘟 度 计 ， 就 需要 在 它 的 内 部 添加 显示 刻度 的 组 件 、 
改变 它 的 填充 颜色 等 。 如 图 8-2 所 示 是 进度 条 的 内 部 结构 树 形 图 : 


7 个 Rectangle 4 显示 
高 亮 与 动画 


图 8-2 ”进度 条 的 内 部 结构 树 形 图 


如 果 把 Logical Tree 延伸 至 Template 组 件 级 别 ， 我 们 得 到 的 束 是 Visual 
Tree。 实 际 工作 中 ， 大 多 数 情 况 下 我 们 是 在 与 Logical Tree 打交道 ， 有 
时 候 为 了 实现 一 些 环 手 的 功能 会 加 Visual Tree 求助 ， 依 个 人 见解 ， 如 果 
你 的 程序 需要 借助 Visual Tree 来 完成 一 些 与 业务 逻辑 (而 不 是 纯 表 现 逻 
辑 ) 相关 的 功能 ， 多 半 是 由 程序 设计 不 良 而 造成 的 ， 请 重新 考虑 逻 
辑 、 功 能 和 数据 类 型 方面 的 设计 。 


如 果 想 在 Logical Tree 上 导航 或 查找 元 素 ， 可 以 借助 LogicalTreeHelper 类 
的 static 方 法 来 实现 : 


e BringIntoView: 把 选 定 元 素 带 进 用 户 可 视 区 域 ， 经 常用 于 可 滚动 的 
视图 e 


e FindLogicalNode: 按 给 定名 称 (Name 属 性 值 ) 查找 元 素 ， 包 括 子 
级 树 上 的 元 素 。 


e GetChildren: 获取 所 有 直接 子 级 元 素 。 
e GetParent: 获取 直接 父 级 元 素 。 


如 果 想 在 Visual Tree 上 导航 或 查找 元 素 ， 则 可 借助 VisualTreeHelper 类 的 
static 方 法 来 实现 。 请 大 家 查阅 MSDN 文 档 ， 此 人 处 不 再 袭 述 。 


现在 我 们 已 经 知道 ，WPF 的 UI 可 以 表示 为 Logical Tree 和 Visual Tree, B 
勾当 一 个 路 由 事件 被 激发 后 是 沿 着 Logical Tree 传 递 还 是 沿 着 Visual Tree 
传递 呢 ? 答案 是 Visual Tree 只 有 这 样 , Æ Template E HP EZ 
能 把 消息 送出 来 。 


Logical Tree 与 Visual Tree 的 区 别 在 后 面 讲述 资源 (Resource) 时 还 会 提 
到 ， 届 时 请 大 家 返回 来 看 一 看 。 


8.2 事件 的 来 龙 去 脉 


事件 的 前 身 是 消息 (Message) 。Windows 是 消息 驱动 的 操作 系统 ， 运 
行 其 上 的 程序 也 遵照 这 个 机 制 运行 。 消 恩 本 质 就 是 一 条 数据 ， 这 条 数 
据 里 记载 着 消息 的 类 别 ， 必 要 的 时 候 还 记载 一 些 消息 参数 。 比 如 ， 当 
你 在 窗 体 上 按 下 鼠标 左 键 的 时 候 ， 一 条 名 为 WM_LBUTTONDOWN 消 
息 就 被 生成 并 加 入 Windows 待 处 理 的 消息 队列 中 大 部 分 情况 下 
Windows 的 消息 队列 里 不 会 有 太 多 消息 在 排队 、 消 息 会 立刻 被 处 理 ， 如 
果 你 的 计算 机 很 慢 并 且 处 在 很 忙 的 状态 〈 如 播放 电影 ) ， 那 么 这 条 消 
息 就 要 等 一 会 才 被 处 理 到 ， 这 就 是 常见 的 操作 系统 反应 延迟 。 当 
Windows 处 理 到 这 条 消息 时 会 把 消息 发 送 给 你 单 击 的 窗 体 ， 窗 体会 用 自 
己 的 一 套 算法 来 啊 应 这 个 消息 ， 这 个 算法 就 是 Windows API 开 发 中 常 说 
的 消息 处 理 函 数 。 消 轧 处 理 函 数 中 有 一 个 多 级 岁 套 的 switch 结 构 ， 进 入 
这 个 switch 结 构 的 消息 会 被 分 门 别 类 并 最 终 流 入 某 个 末端 分 文 ， 在 这 个 
分 文 里 会 有 一 个 由 程序 员 编 写 的 函数 被 调用 。 例 如 对 于 
WM_LBUTTONDOWN 这 个 消息 ， 程 序 员 可 能 会 编写 一 个 函数 来 查看 
它 所 携带 的 参数 〈 即 鼠标 单 击 处 的 X、Y 坐 标 ) ， 然 后 决定 是 把 它们 显 
示 出 来 还 是 在 这 个 点 上 绘制 图 形 等 。 也 有 些 消息 是 不 用 携 这 参 数 的 ， 
比如 按钮 被 单 击 的 消息 ， 当 它 流 入 某 个 分 支 后 程序 员 就 已 经 知道 是 按 
钮 被 单 击 了 ， 程 序 员 并 不 关心 鼠标 点 在 按钮 的 哪个 位 置 上 了 。 


上 面 氢 述 的 过 程 就 是 消息 触发 算法 逻辑 的 过 程 ， 又 称 消息 驱动 。 这 样 
一 个 过 程 对 于 想 入 门 Windows 开 发 的 人 来 说 门楼 太 高 ， 对 于 大 型 的 
Windows 程 序 来 说 开发 与 维护 成 本 也 不 低 。 随 着 微软 面向 对 象 开发 平台 
日 趋 成 熟 ， 微 软 把 消息 机 制 封装 成 了 更 容易 让 人 理解 的 事件 模型 。 


事件 模型 隐藏 了 消息 机 制 的 很 多 细节 ， 让 程序 的 开发 变 得 简单 。 烦 下 
的 消 恩 转动 机 制 在 事件 模型 中 被 简化 为 3 个 关键 所: 


e 事件 的 拥有 者 ， 即 消息 的 发 送 者 。 事 件 的 宿主 可 以 在 某 些 条 件 下 激 
发 它 拥有 的 事件 ， 即 事件 被 触 发 。 事 件 被 触发 则 消 恩 被 发 送 。 


e 事件 的 啊 应 者 : 即 消息 的 接收 者 、 处 理 者 。 事 件 接收 者 使 用 其 事件 
处 理 器 (Event Handler) 对 事件 做 出 响应 。 


e 事件 的 订阅 关系 : 事件 的 拥有 者 可 以 随时 激发 事件 ， 但 事件 发 生 后 
会 不 会 得 到 响应 要 看 有 没有 事件 的 响应 者 ， 或 者 说 要 看 这 个 事件 是 否 
被 关注。 如 果 对 象 A 关 注 对 象 B 的 某 个 事件 是 否 发 生 ， 则 称 A 订 阅 了 B 的 
事件 。 更 进一步 讲 ， 事 件 实际 上 是 一 个 使 用 event 天 键 字 修 炳 的 委托 
(Delegate) 类 型 成 员 变 量 ， 事 件 处 理 器 则 是 一 个 函数 ， 说 A 订 阅 了 B 
的 事件 ， 本 质 上 就 是 让 B.Event 与 A.EventHandler 关 联 起 来 。 所谓 事 件 激 
发 融 是 B.Event 极 调用 ， 这 时 ， 与 其 关联 的 A.EventHandler 束 会 被 调用 。 


事件 模型 可 以 用 如 图 8-3 所 示 的 模型 作为 简要 说 明 
事件 的 拥有 者 事件 的 啊 应 者 


事件 处 理 器 


事件 模型 


在 这 种 模型 里 ， 事 件 的 响应 者 通过 订阅 关系 直接 关联 在 事件 拥有 者 的 
事件 上 ， 为 了 与 WPF 的 路 由 事件 模型 区 分 开 ， 我 把 这 种 事件 模型 称 为 


直接 事件 模型 或 者 CLR 事 件 模 型 。 因 为 CLR 事 件 本 质 上 是 一 个 用 event 

天 键 字 修饰 的 委托 实例 ， 我 们 暂且 模仿 CLR 属 性 的 说 法 ， 把 CLR 事 件 

定义 为 一 个 委托 类 型 实例 的 包 泌 如 或 者 说 有 一 个 委托 类 型 实例 在 文 持 
(backing) 一 个 CLR 事 件 。 


让 我 们 看 一 个 例子 。 新 建 一 个 Windows Form 项 目 ， 在 窗 体 上 放置 一 个 
按钮 并 命名 为 myButton。 双击 按钮 ，Visual Studio 会 目 动 为 我 们 创建 
myButton 的 Click 事 件 处 理 器 (myButton_Click 方 法 ) 并 跳 转 到 其 中 。 这 
时， 一 个 完整 的 直接 事件 模型 就 实现 了 ， 计 我 们 识别 一 下 事件 模型 的 
几 个 关键 部 分 : 

e 事件 的 拥有 者 : myButton ° 

e 事件 : myButton.Click ° 

e 事件 的 响应 者 : AREH ° 

e 事件 处 理 右 : this.myButton_Click 方 法 。 


e 订阅 关系 : 可 以 在 Form1.Designer.cs 文 件 中 找到 的 一 名 代码 是 


this.myButton.Click += new System.EventHandler(this.myButton Click); 


此 句 即 为 确立 订阅 关系 的 代码 。 
我 们 实现 myButton_Click 方 法 的 代码 如 下 : 


private void myButton Click(object sender, EventArgs e) 
| 

if (sender is Button) 

j 


[ 


MessageBox.Show((sender as Button).Namo); 


运行 的 效果 如 图 8-4 所 示 。 


myButton 


图 8-4 ”运行 效果 


这 说 明 在 CLR 直 接 事 件 模 型 中 ， 事 件 的 拥有 者 束 是 消 恩 的 发 送 背 


(sender) 。 


前 面 这 个 例子 是 直接 事件 模型 最 位 单 的 应 用 ， 实 际 上 ， 只 要 文 持 事件 
的 委托 与 影响 事件 的 方法 在 签名 上 保持 一 致 〈《 即 参数 列表 和 返回 值 一 
致 ) ， 则 一 个 事件 可 以 由 多 个 事件 处 理 器 来 响应 (多 播 事 件 ) 、 一 个 
事件 处 理 侨 也 可 以 用 来 啊 应 多 个 事件 。 在 此 束 不 一 一 举例 了 。 


直接 事件 模型 是 传统 .NET 开 发 中 对 象 间 相互 协同 、 沟 通信 息 的 主要 手 
段 ， 它 在 很 大 程度 上 简化 了 程序 的 开发 。 然 而 直接 事件 模型 并 不 完 
美 ， 它 的 不 完美 之 处 就 在 于 事件 的 响应 者 与 事件 拥有 者 之 间 必 须 建立 
事件 订阅 这 个 “专线 联系 ”。 这 样 至 少 有 两 个 况 端 ; 

e 每 对 消息 是 “发 送 一 啊 应 ?关系 ， 必 须 建 立 显 式 的 点 对 点 订阅 关系 。 


e 事件 的 答 主 必须 能 够 直接 访问 事件 的 响应 者 ， 不 然 无 法 建立 订阅 关 


ZIN 


注意 
直接 事件 模型 的 弱点 会 在 下 面 两 种 情况 中 显露 出 来 : 


(1) 程序 运行 期 在 容器 中 动态 生成 一 组 相同 控件 ， 每 个 控件 的 同一 个 事件 都 使 用 同一 个 事件 
处 理 器 来 响应 。 面 对 这 种 情况 ， 我 们 在 动态 生成 控件 的 同时 束 需 要 显 式 书写 事件 订阅 代码 。 


(2) 用 户 控 件 的 内 部 事件 不 能 被 外 界 所 订阅 ， 必 须 为 用 户 控件 定义 新 的 事件 用 以 向 外 界 暴 露 
内 部 事件 。 当 模块 划分 很 细 的 时 候 ，UI 组 件 的 层级 会 很 多 ， 如 果 想 让 很 外 层 的 容器 订阅 深层 控 
件 的 某 个 事件 束 需 要 为 每 一 层 组 件 定 义 用 于 暴露 内 部 事件 的 事件 、 形 成 事件 链 。 


—— 


路 由 事件 的 出 现 很 好 地 解决 了 上 述 两 种 情况 中 出 现 的 问题 ， 下 一 市 我 
们 束 来 研究 路 由 事件 的 使 用 。 


8.3 “深入浅出 路 由 事件 


为 了 降低 由 事件 订阅 这 来 的 厦 合 度 和 代码 量 ，WPF 推 出 了 路 由 事件 机 
制 。 路 由 事件 与 直接 事件 的 区 别 在 于 ， 直 接 事件 激发 时 ， 发 送 者 直接 
将 消息 通过 事件 订阅 交 送 给 事件 啊 应 者 ， 事 件 啊 应 者 使 用 其 事件 处 理 
髓 方法 对 事件 的 发 生 做 出 响应 、 驱 动 程序 逻辑 按 客户 需求 运行 ， 路 由 
事件 的 事件 拥有 者 和 事件 啊 应 者 之 间 则 没有 直接 显 式 的 订阅 关系 ， 事 
件 的 拥有 者 只 负责 激发 事件 ， 事 件 将 由 谁 啊 应 它 并 不 知道 ， 事 件 的 啊 
应 者 则 安装 有 事件 侦 听 器 ， 针 对 某 类 事件 进行 侦 听 ， 当 有 此 类 事件 传 
弟 至 此 时 事件 啊 应 者 就 使 用 事件 处 理 器 来 啊 应 事件 并 决定 事件 是 否 可 
以 继续 传递 。 举 个 例子 ， 在 Visual Tree 上 有 一 个 Button 控 件 ， 当 它 被 单 
击 后 就 相当 于 它 喊 了 一 声 “ 我 彼 单 击 了 ”， 这 样 一 个 Button.Click 事 件 整 
开始 在 Visual Tree 传 播 ， 当 事件 经 过 某 个 结 点 时 如 果 这 个 结 点 没有 安装 
用 于 侦 听 Button.Click 事 件 的 “ 耳 末 ”， 那 么 它 会 无 视 这 个 事件 ， 让 它 畅 
通 无 阻 地 继续 传播 ， 如 果 某 个 结 点 安装 了 针对 Button.Click 的 侦 听 器 ， 
它 的 事件 处 理 絮 就 会 被 调用 ( 侦 听 者 并 不 关心 具体 哪个 Button 的 Click 
事件 被 传 来 ， 即 任何 一 个 传 来 的 Button.Click 事 件 都 会 被 侦 听 到 ) ， 在 
事件 处 理 器 内 程序 员 可 以 查看 路 由 事件 原始 的 出 发 点 是 哪个 控件 、 上 
一 站 是 哪里 ， 还 可 以 决定 事件 传递 到 此 为 止 还 是 可 以 继续 传递 一 一 路 
由 事件 就 是 这 样 依 靠 * 口 耳 相 传 > 的 办 法 将 消息 传 给 “关心 ” 它 的 控件 。 
顺便 说 一 句 ， 尽 管 WPF 推 出 了 路 由 事件 机 制 ， 但 它 仍 然 文 持 传统 的 直 
接 事 件 模型 。 本 廊 我 们 就 聊 聊 路 由 事件 的 使 用 ， 先 谈 WPF 系 统 内 置 路 
由 事件 的 使 用 ， 再 谈 如 何 声 明和 使 用 自 定义 路 由 事件 。 


8.3.1 使 用 WPF 内 置 路 由 事件 


WPF 系 统 中 的 大 多 数 事件 都 是 可 路 由 事件 ， 可 路 由 事件 在 MSDN 文 档 
里 会 具有 Routed Event Information 一 栏 ， 使 用 者 可 以 通过 这 一 栏 信 息 了 
解 如 何 啊 应 这 一 路 由 事件 。 我 们 以 Button 的 Click 事 件 来 说 明 路 由 事件 
的 使 用 。 请 看 下 面 的 例子 。 


XAML 代 码 如 下 : 


«Window x:Class="WpfApplication1.Window1" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Routed" 
Height-"200" Width-"200"» 

«Grid x:Name-"gridRoot" Background-"Lime" 
«Grid x:Name-"gridA" Margin-" 10" Background-"Blue"» 
«Grid.ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefinition /> 
«/Grid.ColumnDefinitions? 
«Canvas x:Name-"canvasLeft" Grid.Column-"0" Background-"Red" Margin-"10"» 
«Button x:Name-"buttonLeft" Content-"Left" Width-"40" Height-" 100" 
Margin-" 10" /> 
</Canvas> 
«Canvas x:Name="canvasRight" Grid.Column="1" Background="Yellow" Margin="10"> 
«Button x:Name="buttonRight" Content="Right" Width="40" Height="100" 
Margin="10" /> 
</Canvas> 
</Grid> 
</Grid> 
</Window> 


其 运行 效果 和 Logical Tree 结构 如 图 8-5 所 示 。 


Window 


gridRoot 


8 ' Routed 


canvasLeft canvasRight 


buttonLeft buttonRight 


图 8-5 ”运行 效果 和 Logical Tree 结构 


当 单 击 buttonLeft 时 ， Button.Click 事 fF EL 2 W 着 
buttonLeft > canvasLeft  gridA ^ girdRoot > Window 3X 4& I8 2X [n] E f£ 
X ; 单 击 buttonRight , 则 Button.Clicbk ¥ fF 沿 着 
buttonRight ^ canvasRight > gridA > gridRoot ^ Window 路 线 传 送 。 因 为 
目前 还 没有 哪个 控件 侦 听 Button.Click 事 件 ， 所 以 单 击 按钮 后 尽管 事件 
向 上 传递 却 并 没有 受到 响应 。 下 面 ， 让 我 们 为 gridRoot 安 装 针 对 
Button.Click 事 件 的 侦 听 器 。 


方法 很 简单 ， 就 是 在 窗 体 的 构造 器 中 调用 gridRoot 的 AddHandler 方 法 把 
想 监听 的 事件 与 事件 的 处 理 器 关联 起 来 : 


public Window1() 
| 
InitializeComponent(); 
this.gridRoot.AddHandler(Button.ClickEvent, new RoutedEventHandler(this.ButtonClicked)); 


AddHandler 方 法 源 自 UIElement 类 ， 也 就 是 说 ， 所 有 UI 控件 都 具有 这 个 
方法 。 书 写 AddHandler 方 法 时 你 会 发 现 它 的 第 一 个 参数 是 
Button.ClickEvent 而 不 是 Button.Click。 原 来 ，WPF 的 事件 系统 也 使 用 了 
与 属性 系统 类 似 的 “静态 字段 -包装 絮 * 的 策略 。 也 就 是 说 ， 路 由 事件 
本 身 是 一 个 RoutedEvent 类 型 的 静态 成 员 变 量 (Button.ClickEvent) , 

Button 还 有 一 个 与 之 对 应 的 Click 事 件 (CLR 包 装 ) 专门 用 于 对 外 界 暴露 
这 个 事件 。“ 名 字 叫 路 由 事件 ， 可 我 却 得 选择 一 个 静态 字段 >， 这 是 很 
多 初学 者 所 迷惑 的 地 方 (如 图 8-6 所 示 ) 。 所 以 ， 我 们 不 妨 歼 仿 依赖 属 
性 ， 把 路 由 事件 的 CLR 包 装 称 为 “CLR 事 件 *。 如 此 ， 就 像 每 个 依赖 属性 
dd 目 己 的 CLR 属 性 包装 一 样 ， 每 个 路 由 事件 都 拥有 目 己 的 CLR 事 


public Window1() 


InitializeComponent(); 
this.gridRoot. AddHandler(Button. 
j 


9 BorderBrushProperty 
9 BorderThicknessProperty 
9 ClickEvent 


9 ClickModeProperty 
9 ClipProperty 
9 ClipToBoundsProperty 


图 8-6 ”路 由 事件 是 静态 字段 


上 面 的 代码 让 最 外 层 的 Grid (gridRoot) 能 够 捕捉 到 从 内 部 “ 球 ” 出 来 的 
按钮 单 击 事件 ， 捕 捉 到 后 会 用 this.ButtonClicked 方 法 来 进行 啊 应 处 理 。 
ButtonClicked 方 法 代码 如 下 : 


private void ButtonClicked(object sender, RoutedEventArgs e) 


f 
[ 


MessageBox.Show((e.OriginalSource as FrameworkElement).Name); 


这 里 有 一 点 非常 重要 : 因为 路 由 事件 (的 消息 ) 是 从 内 部 一 层 一 层 传 
递 出 来 最 后 到 达 最 外 层 的 gridRoot， 并 且 由 gridRoot 元 素 将 事件 消息 交 
给 ButtonClicked 方 法 来 处 理 ， 所 以 传 入 ButtonClicked 方 法 的 参数 sender 
实际 上 是 gridRoot 而 不 是 被 单 击 的 Button， 这 与 传统 的 直接 事件 不 太一 
样 。 如 果 想 查看 事件 的 源头 (最 初 发 起 者 ) 怎么 办 呢 ? 答案 是 使 用 
e.OriginalSource， 使 用 它 的 时 候 需 要 使 用 as/is 操 作 符 或 者 强制 类 型 转换 
把 它 识别 了 转换 为 正确 的 类 型 。 


一 /人 一 


运行 程序 并 单 击 右边 的 按钮 ， 运 行 效果 如 图 8-7 所 示 。 


buttonRight 


图 8-7 ”运行 效果 


上 壕 为 元 素 添 加 路 由 事件 处 理 器 的 事情 在 XAML 里 也 可 以 完成 ， 只 需 
要 把 XAML 代 码 改 成 这 样 即 可 : 


«Grid x:Name-"gridRoot" Background-"Lime" Button.Cliekz"ButtonClicked" > 
<|-- 原 有 内 容 --> 


«Gnd» 


RIJE, XAML ARAY ELI TESI BEA T 26 ZU 8 25 JH IER EH S T AE 
MaL WADER, MASE h Button. 2f 4 fS fT A Tz, 
AWRA ES RIOT Pn, BIRR =N ET I8 Tem 

[n] A ze 1] e — 1 39 RJ SEA REPE S Pe 6H] CU B ^ ES HOSTE VERCRS 
事件 处 理 器 (如 图 8-8 所 示 ) ° 


<Grid xName="gridRoot" Background="Lime" Button.Click="" 


图 8-8 


自动 提示 功能 


如 果 你 使 用 的 是 ButtonBase 而 不 是 Button 
屁 的 自动 提示 支持 (如 图 8-9 所 示 ) 


， 就 能 获得 XAML 编辑 


«Grid xName-"gridRoot" Background-"Lime" ButtonBase b 


图 8-9 


自动 提示 功能 


理 很 简单 ， 因 为 ClickEvent 这 个 路 由 事件 是 ButtonBase 类 i a 
变量 (Button 类 是 通过 继承 获得 它 的 ) ， 


: 而 XAML 编辑 器 
ClickEvent 字 段 定 义 的 类 。 


8.3.2 ”和 目 定义 路 由 事件 


态 成 员 
只 认得 包含 


为 了 方便 程序 中 对 象 之 间 的 通信 常 需要 我 们 自己 定义 一 些 路 由 事件 ， 
说 实话 ， 在 程序 中 使 用 这 种 能 够 在 对 象 间 “ 飞 来 飞 去 ”的 事件 、 不 再 受 
直接 事件 〈 那 种 必须 手动 把 事件 一 层 一 层 向 外 传 ) 的 束缚 的 感觉 真 的 
ARTE! 那么 ， 我 们 如 何 才能 定义 自己 的 路 由 事件 呢 ? 本 节 就 来 详细 讨 
论 这 个 问题 。 

创建 自 定 义 路 由 事件 大 体 可 以 分 为 三 个 步骤 : 

(1) 声明 并 注册 路 由 事件 。 

(2) 为 路 由 事件 添加 CLR 事 件 包装 。 

(3) 创建 可 以 激发 路 由 事件 的 方法 。 


下 面 以 从 ButtonBase 类 中 抽取 出 的 代码 为 例 来 展示 这 3 个 步骤 。 为 了 如 
免 生 朴 代码 对 学 习 的 干扰 ， 此 处 对 代码 做 了 些 商 化 : 


public abstract class ButtonBase : ContentControl, ICommandSource 


j 
1 


/声明 并 注册 路 由 事件 
public static readonly RoutedEvent ClickEvent = 上 # 注 册 路 由 事件 关 ; 


为 路 由 事件 添加 CLR 事件 包装 器 
public event RoutedEventHandler Click 


j 
t 


add { this.AddHandler(ClickEvent, value); } 
remove { this.RemoveHandler(ClickEvent, value); } 
! 
I| 激发 路 由 事件 的 方法 ， 此 方法 在 用 户 单 击 鼠 标 时 会 被 Windows 系统 调用 
protected virtual void OnClick() 
RoutedEventArgs newEvent = new RoutedEventArgs(ButtonBase.ClickEvent, this); 
this. RaiseEvent(newEvent); 


定义 路 由 事件 与 定义 依赖 属性 的 手法 极为 相似 一 一 为 你 的 类 声明 一 个 
由 public static readonly 修 f 的 RoutedEvent 类 型 字段 ， 然 后 使 用 
EventManager 类 的 RegisterRoutedEvent 方 法 进行 注册 。 可 惜 的 是 Visual 
Studio 2008 没 有 声明 注册 路 由 事件 的 代码 片断 (snippet) ， 所 以 这 一 过 
程 需要 手写 代码 。 互 联网 上 有 一 些 用 于 声明 注册 路 由 事件 的 代码 片 
上 条， 大 家 可 以 目 己 下 载 并 添加 。 


为 路 由 事件 添加 CLR 事 件 包装 古 为 了 把 路 由 事件 暴露 得 像 一 个 传统 的 
直接 事件 ， 如 果 不 关 注 故 层 实 现 ， 程 序 员 不 会 感觉 到 它 与 传统 直接 事 
件 的 区 别 ， 仍 然 可 以 使 用 操作 符 (+=) 为 事件 添加 处 理 器 和 使 用 操作 
符 O=) 移 除 不 再 使 用 的 事件 处 理 器 。 为 路 由 事件 添加 CLR 事 件 包 装 的 
代码 与 使 用 CLR 属 性 包装 依赖 属性 的 代码 格式 亦 非常 相近 ， 只 是 关键 
字 get 和 set 被 蔡 换 为 add 和 remove。 当 使 用 操作 符 (+=) 添加 对 路 由 事 


件 的 侦 听 处理 时 ，add 分 支 的 代码 会 被 调用 ;， 当 使 用 操作 符 (O=) 移 除 
对 此 事件 的 侦 听 处 理 时 ，remove 分 文 的 代码 会 被 调用 一 -CLR 事 件 只 
是 “看 上 去 像 "一 个 直接 事件 ， 本 质 上 不 过 是 在 当前 元 素 (路 由 的 第 一 
站 ) 上 调用 AddHandler 和 RemoveHandler 而 已 。 另 外 ，XAML 编 辑 器 也 
是 徘 这 个 CLR 事 件 包装 絮 来 产生 目 动 提示 。 


激发 路 由 事件 很 简单 ， 首 先 创 建 需 要 让 事件 携带 的 消息 

(RoutedEventArgs 类 的 实例 ) 并 把 它 与 路 由 事件 关联 ， 然 后 调用 元 素 
的 RaiseEvent 方 法 (继承 自 UIElement 类 ) 把 事件 发 送出 去 。 注 意 ， 这 
与 激发 传统 直接 事件 的 方法 不 同 ， 传 统 直 接 事 件 的 激发 是 通过 调用 
CLR 事 件 的 Invoke 方 法 实现 的 ， 而 路 由 事件 的 激发 与 作为 其 包装 器 的 
CLRÉPEZÉE ARR ° 


了 解 了 创建 目 定义 路 由 事件 的 步骤 后 ， 让 我 们 关注 用 于 注册 路 由 事件 
的 代码 。 完 整 的 注册 代码 如 下 : 


省 声明 并 注册 路 由 事件 
public static readonly RoutedEvent ClickEvent = EventManager.RegisterRoutedEvent 
("Click", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof( ButtonBase)); 


最 重要 的 是 了 解 EventManager.RegisterRoutedEvent 方 法 的 四 个 参数 。 


第 一 个 参数 为 string 类 型 ， 被 称 为 路 由 事件 的 名 称 ， 按 微软 的 建议 ， 这 
DF IT ER JNL1 5j RoutedEvent Z? Œ H5) Bj 28 4l CLR SE PF E R 8 BJ 4 WR — 
致 。 本 例 中 ， 路 由 事件 变量 名 为 ClickEvent， 则 此 字符 串 为 Click，CLR 
事件 的 名 称 亦 为 Click。 因 为 底层 算法 与 依赖 属性 类 似 ， 需 要 使 用 这 个 
字符 串 去 生成 用 于 注册 路 由 事件 的 Hash Code， 所 以 这 个 字符 串 不 能 为 


二 个 参数 称 为 路 由 事件 的 策略 。WPEF 路 由 事件 有 3 种 路 由 策略 : 


e Bubble， 冒 泡 式 ， 路 由 事件 由 事件 的 激发 者 出 发 同 它 的 上 级 容器 一 
层 一 层 路 由 ， 直 至 最 外 层 容器 (Window 或 者 Page) 。 因 为 是 由 树 的 底 
端 同 顶 端 移 动 ， 而 有 旦 从 事件 激发 元 素 到 UI 树 的 树 根 只 有 确定 的 一 条 路 
径 ， 所 以 这 种 策略 被 形象 地 命名 为 “ 冒 泡 式 ”。 


e Tunnel， 隧 道 式 ， 事件 的 路 由 方 同 正好 与 Bubble 筑 上 略 相 反 ， 是 由 UI 
树 的 树 根 向 事件 激发 控件 移动 。 因 为 从 UI 树 根 向 树 压 移动 时 有 很 多 路 
人 径 ， 但 我 们 希望 是 由 树 根 向 激发 事件 的 控件 移动 ， 这 就 好 像 在 树 根 与 
T UR 了 一 条 隧道 ， 事 件 只 能 沿 着 隧道 移动 ， 所 以 称 之 
JRE” ° 


: Direct， 直 达 式 : 模仿 CLR 直 接 事 件 ， 直 接 将 事件 消息 送 达 事 件 处 
HERS e 


第 三 个 参数 用 于 指定 事件 处 理 絮 的 类 型 。 事 件 处 理 占 的 返回 值 类 型 和 
参数 列表 必须 与 此 参数 指定 的 委托 保持 一 致 ， 不 然 会 导致 在 编译 时 抛 


HF o 


第 四 个 参数 用 于 指明 路 由 事件 的 宿主 《拥有 者 ) EMARE o 5p 
属性 类 似 ， 这 个 类 型 和 第 一 个 参数 共同 参与 一 些 确 层 算 法 且 产生 这 个 
路 由 事件 的 Hash Code 并 被 注册 到 程序 的 路 由 事件 列表 中 。 

下 面 我 们 上 自己 动手 创建 一 个 路 由 事件 ， 这 个 事件 的 用 途 是 报告 事件 发 
生 的 时 间 。 


所 谓 “ 兵 马 未 动 ， 粮 草 先 行 "> 一 一 为 了 让 事件 消息 能 携带 按钮 被 单 击 时 
的 时 间 ， 我 们 创建 了 一 个 RoutedEventArgs 类 的 派生 类 ， 并 为 其 添加 
ClickTime 属 性 : 


由 用 于 承载 时 间 消息 的 事件 参数 

class ReportTimeEventArgs : RoutedEventArgs 
j 

l 


public ReportTimeEventArgs(RoutedEvent routedEvent, object source) 


: base(routedEvent, source) {} 


public DateTime ClickTime { get; set; } 


1 
Í 


然后 ， 再 创建 一 个 Button 类 的 派生 类 并 按 前 述 步 又 为 其 添加 路 由 事件 : 


class TimeButton : Button 
| 
放声 明和 注册 路 由 事件 
public static readonly RoutedEvent ReportTimeEvent = EventManager.RegisterRoutedEvent 
("ReportTime", RoutingStrategy.Bubble, typeof( EventHandlercReportTimeEventArgs?), typeof( TimeButton)); 


I| CLR 事件 包装 器 
public event RoutedEventHandler ReportTime 


| 
add | this.AddHandler(ReportTimeEvent, value); | 


remove { this.RemoveHandler(ReportTimeEvent, value); } 


I| 激发 路 由 事件 ， 借 用 Click 事件 的 激发 方法 
protected override void OnClick() 


{ 
base.OnClick(; /保证 Button 原 有 功能 正常 使 用 、Click 事件 能 被 激发 


ReportTimeEventArgs args = new ReportTimeEventArgs(ReportTimeEvent, this); 


args.ClickTime = DateTime.Now; 
this.RaiseEvent(args); 


下 面 是 程序 的 界面 XAML 代 码 : 


«Window x:Class-"WpfApplicationTimeButton. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:localz"clr-namespace: WpfApplicationTimeButton" Titlez"Routed Event" 
x:Name-" window 1" Height-"300" Width-"300" 
local: TimeButton.ReportTimez"ReportTimeHandler" > 

«Grid x: Name-"grid. 1" local: TimeButton.ReportTimez"ReportTimeHandler" > 
«Orid x: Name-"grid 2" local: TimeButton.ReportTimez"ReportTimeHandler" > 
«Grid x: Name-"grid 3" local: TimeButton.ReportTimez" ReportTimeHandler" > 
«StackPanel x:Name-"stackPanel. 1" 
local: TimeButton.ReportTimez"ReportTimeHandler" > 
«ListBox x:Name-"listBox" /> 
«]ocal;TimeButton x: Name-"timeButton" Width-"80" Height-"80" 
Content=" 报 时 " local; TimeButton.ReportTimez "ReportTimeHandler" /> 
</StackPanel> 
</Grid> 
«Gnd» 
</Grid> 
</Window> 


在 UI 界面 上 ， 以 Window 为 根 ， 套 了 三 层 Grid 和 一 层 StackPanel (它们 都 
设 定 了 x:Name) ， 最 里 面 的 StackPanel 中 放置 了 一 个 ListBox 和 一 个 
TimeButton (上 面 刚 刚 创 建 的 Button 派 生 类 ) 。 注 意 : 从 最 内 层 的 
TimeButton 到 最 外 层 的 Window 都 侦 听 着 TimeButton.ReportTimeEvent 这 
个 路 由 事件 ， 并 用 ReportTimeHandler 方 法 来 啊 应 这 个 事件 。 
ReportTimeHandler 的 代码 如 下 : 


|! ReportTimeEvent 路 由 事件 处 理 器 
private void ReportTimeHandler(object sender, ReportTimeEventArgs e) 


f 
1 


FrameworkElement element = sender as FrameworkElement; 

string timeStr = e.ClickTime.ToLongTimeString(); 

string content = string.Format(" {0} 到 达 (1]", timeStr, element, Name); 
this.listBox.Items.Add(content); 


运行 程序 、 单 击 按钮 ， 效 果 如 图 8-10 所 示 。 


14:11:35 到 达 timeButton 
14:11:35 到 达 stackPanel 1 
14:11:35 到 达 grid 3 
14:11:35 到 达 grid 2 
14:11:35 到 达 grid 1 
14:11:35 到 达 window 1 


图 8-10 ”运行 效果 


注意 


为 我 们 为 TimeButton 注 册 ReportTimeEvent 时 使 用 的 是 Bubble 策 略 ， 所 以 事件 是 沿 这 样 的 路 径 
由 内 向 外 传递 的 : TimeButton > StackPanel > Grid > Grid ^ Grid > Window ° 


如 果 我 们 把 TimeReportEvent 的 策略 改 为 Tunnel: 


省 声明 和 注册 路 由 事件 
public static readonly RoutedEvent ReportTimeEvent = EventManager.RegisterRoutedEvent 
("ReportTime", RoutingStrategy. Tunnel, typeof(EventHandlercReportTimeEventArgs?), typeof(TimeButton)); 


单 击 按钮 后 ， 效 果 是 如 图 8-11 所 示 。 


14:17:25 到 达 window. 1 
14:17:25 到 达 grid 1 


14:17:25 到 达 stackPanel 1 
14:17:25 到 达 timeButton 


图 8-11 ”运行 效果 


正好 与 Bubble 策 略 相 反 ，Tunnel 策 略 使 事件 沿 着 从 外 问 内 的 路 径 传 递 : 
Window > Grid > Grid > Grid > StackPanel ^ TimeButton ° 


说 到 这 里 ， 不 梦想 起 一 名 名言: Bucket stop here, ŽA MAE 368 B 
己 手 里 残 不 要 再 继续 往 下 传 了 。 那 么 ， 如 何 让 一 个 路 由 事件 bucket stop 
here 呢 ? 换 名 话说， 如 何 让 一 个 路 由 事件 在 某 个 结 点 处 不 再 继续 传递 
UE? 办 法 非常 简单 : 路 由 事件 携 珊 的 事件 参数 必须 是 RoutedEventArgs 
类 或 其 派生 类 的 实例 ，RoutedEventArgs 类 具有 一 个 bool 类 型 属性 
Handled， 一 旦 这 个 属性 被 设置 为 tue， 就 表示 路 由 事件 “已 经 被 处 理 ? 了 

(Handle 有 “处 理 *”、“ 搞 定 ” 的 意思 ) ， 那 么 路 由 事件 也 就 不 必 再 往 下 传 
递 了 。 如 果 把 上 面 的 ReportTimeEvent 处 理 絮 修改 为 这 样 : 


|l ReportTimeEvent 路 由 事件 处 理 器 
private void ReportTimeHandler(object sender, ReportTimeEventArgs e) 
1 
FrameworkElement element = sender as FrameworkElement; 
string timeStr = e.ClickTime.ToLongTimeString(); 
string content = string.Format("{0} 到 达 {1}", timeStr, element.Name); 
this.listBox.lItems.Add(content); 


if (element == this.grid 2) 
{ 
e.Handled = true; 


] 


运行 程序 、 单 击 按钮 后 ， 效 果 如 图 8-12 所 示 (分 别 为 Bubble 策 略 和 
Tunnel 策 略 ) : 


16:22:56 到 达 timeButton 16:20:16 到 达 window 1 
16:22:56 到 达 stackPanel 1 16:20:16 到 达 grid 1 
16:22:56 到 达 grid 3 16:20:16 到 达 grid 2 
16:22:56 到 达 grid 2 


图 8-12 ”运行 效果 


TA, DJye.Handledftix Æ XH true, X E Bubble% 略 还 'A& Tunnel 4& 
Wi Teri a - 不 再 同 下 传递 


注意 


让 我 们 稍 作 总 结 。 路 由 事件 将 程序 中 的 组 件 进 一 步 解 耦 〈 比 用 直接 事件 传递 消息 还 要 松散 ) ， 
使 程序 员 可 以 更 自由 地 编写 代码 、 实 现 设计 。 这 里 有 两 点 经 验 与 大 家 分 享 


el 


o 很 多 类 的 事件 都 是 路 由 事件 ， 如 TextBox 类 的 TextChanged 事 件 、 Binding 类 的 SourceUpdated 
事件 等 ， 所 以 在 用 到 这 些 类 型 的 时 候 不 要 墨 守 传 统 .NET 编 程 带 来 的 习惯 ， 要 发 挥 自 己 的 想象 
力 ， 让 程序 结构 更 加 合理 、 代 码 更 加 简洁 。 


e 路 由 事件 虽 好 ， 但 也 不 要 滥用 ， 举 个 例子 ， 如 果 让 所 有 Button (包括 组 件 里 的 Button) 的 
Click 事 件 都 传递 到 最 外 层 窗 体 ， 让 次 体 捕 提 并 处 理 它 ， 那 么 程序 架构 就 变 得 毫 无 意义 了 。 正 确 
的 办 法 是 ， 事 件 该 由 谁 来 捕捉 处 理 ， 传 到 这 个 地 方 时 就 应 该 处 理 掉 。 


F 


Er 


8.3.3 RoutedEventArgsH'JSource Ej OriginalSource 


前 面 已 经 提 到 ， 路 由 事件 是 沿 着 VisualTree 传 递 的 。VisualTree 与 
LogicalTree 的 区 别 就 在 于 : LogicalTree 的 叶子 结 点 是 构成 用 户 界 面 的 控 
件 ， 而 VisualTree 要 连 控 件 中 的 细微 结构 也 算 上 。 


我 们 说 “路 由 事件 在 VisualTree 上 传递 ”， 本 意 上 是 说 “路 由 事件 的 消息 在 
VisualTree 上 传递 >， 而 路 由 事件 的 消息 则 包含 在 RoutedEventArgs 实 例 
中 。RoutedEventArgs 有 两 个 属性 Source 和 OriginalSource ， 这 两 个 属性 
都 表示 路 由 事件 传递 的 起 点 〈 即 事件 消息 的 源头 ) ， 只 不 过 Source 表 示 
的 是 LogicalTree 上 的 消 因 源头， 而 OriginalSource 则 表示 VisualTree 上 的 
源头 。 请 看 下 面 的 例子 。 


首先 创建 了 一 个 UserControl，XAML 代 码 如 下 (没有 C# 罗 辑 代 码 ) : 


<UserControl x:Class="ItemsPanelSample, MyUserControl" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml"» 
«Border BorderBrush-"Orange" BorderThickness-"3" ComerRadius-" 5" 
«Button x: Namez"innerButton" Widthz"80" Heightz"80" Content "OK" /> 
«[Border» 
«/UserControl 


这 个 UserControl 的 类 名 为 MyUserControl ， 其 中 包含 一 个 名 为 
innerButton 的 Button。 然 后 把 这 个 UserControl 添 加 到 主 窗 体 中 : 


«Window x:Class-"ItemsPanelSample.MainWindow" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:localz"clr-namespace: SourceAndOriginalSourceSample " 
Title-"Source v.s. OriginalSource" 

Height 180" Width-"300" WindowStyle-"ToolWindow"» 
«Grid» 

«local:MyUserControl x:Namez"myUserControl" Margin="10" /> 
</Grid> 

</Window> 


最 后 在 后 台 代 码 中 为 主 窗 体 添加 对 Button.Click 路 由 事件 的 侦 听 : 


public partial class MainWindow : Window 


| 
public MainWindow() 


| 


InitializeComponent(); 


IL 为 主 窗 体 添加 对 Button. Click 事件 的 侦 听 
this.AddHandler(Button.ClickEvent, new RoutedEventHandler(this.Button_Click)); 
| 


I| 路 由 事件 处 理 器 
private void Button Click(object sender, RoutedEventArgs e) 


| 
string strOriginalSource = string.Format(" VisualTree start point: {0}, type is |1]", 
(e.OriginalSource as FrameworkElement).Name, e.OriginalSource.GetType().Name); 


string strSource = string.Format("LogicalTree start point: {0}, type is {1}", 
(e.Source as FrameworkElement).Name, e.Source.GetType().Name); 


MessageBox.Show(strOriginalSource + "rin" + strSource); 


运行 程序 、 单 击 按钮 ， 效 果 如 图 8-13 所 示 。 


Source v.s OriginalSource 日 


VisualTree start point: innerButton, type is Button 
LogicalTree start point: myUserControl, type is MyUserControl 


OK 


| 
| 


图 8-13 ”运行 效果 


Button.Click 路 由 事件 是 从 MyUserControl 的 innerButton 发 出 来 的 ， 在 主 
窗 体 中 ，myUserControl 是 LogicalTree 的 来 端 结 点 ， 所 以 e.Source 就 是 
myUserControl; 而 窗 体 的 VisualTree 则 包含 了 myUserControl 的 内 部 结 
构 ， 可 以 “看 见 * 路 由 事件 究竟 是 从 哪个 控件 发 出 来 的 ， 所 以 使 用 
e.OriginalSource 可 以 获得 innerButton ° 


8.3.4 ”事件 也 附加 一 一 深入 浅 出 附加 事件 


在 WPF 事 件 系统 中 还 有 一 种 事件 被 称 为 附加 事件 (Attached Event) ， 
它 就 是 路 由 事件 。“ 那 为 什么 还 要 起 个 新 名 字 呢 ? ”你 可 能 会 问 。 


“号 无 彩 风 双飞 恬 ， 心 有 有 灵犀 一 点 通 ”， 这 了 吏 是 对 附加 事件 箱 主 的 真实 
写照 。 怎 么 解释 呢 ? 让 我 们 看 看 都 有 哪些 类 拥有 附加 事件 : 


e Binding: SourceUpdated 事 件 、TargetUpdated 事 件 。 


e Mouse 类 : MouseEnter 事 件 、MouseLeave 事 件 、MouseDown 事 件 、 
MouseUp 事 件 等 。 


e Keyboard: KeyDown 事 件 、KeyUp 事 件 等 。 
再 对 比 一 下 那些 拥有 路 由 事件 的 类 ， 如 Button、Slider ` TextBox...... 发 


现 什么 问题 了 吗 ? 原来 ， 路 由 事件 的 宾主 都 是 些 拥 有 可 视 化 实体 的 界 
面 元 素 ， 而 附加 事件 则 不 具备 显示 在 用 户 界 面 上 的 能 力 。 也 了 束 是 说 ， 


附加 事件 的 宿主 没有 界面 温 染 功能 这 双 “ 飞 可 >”， 但 一 样 可 以 使 用 附加 
事件 这 个 “灵犀 ”与 其 他 对 象 进行 沟通 。 

理解 了 附加 事件 的 原理 ， 让 我 们 动手 写 一 个 例子 。 我 想 实 现 的 逻辑 是 
这 样 的 : 设计 一 个 名 为 Student 的 类 ， 如 果 Student 实 例 的 Name 属 性 值 发 
生 了 变化 就 激发 一 个 路 由 事件 ， 我 会 使 用 界面 元 素来 捕捉 这 个 事件 。 


这 个 类 的 代码 如 下 : 


public class Student 
| 
I| 声明 并 定义 路 由 事件 
public static readonly RoutedEvent NameChangedEvent = EventManager.RegisterRoutedEvent 
("NameChanged", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Student)); 


public int ld | get; set; } 
public string Name { get; set; } 


设计 一 个 简单 的 界面 : 


«Window X:Class="WpfApplication1,Windowl" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-" Attached Event" 
Height-"200" Width-"200"» 

«Grid x: Name-"gridMain"» 
«Button x: Name-"button]" Content-"OK" Width-"80" Height-"80" 
Click-"Button Click" /> 
«Grid» 
</Window> 


其 后 合 代码 如 下 : 


public partial class Window] : Window 


[ 
1 


public Window10) 


| 


InitializeComponent(); 


I RANE Grid 添加 路 由 事件 侦 听 器 
this.gridMain.AddHandler( 
Student.NameChangedEvent, 
new RoutedEventHandler(this.StudentNameChangedHandler)); 


1 
f 


II Click 事件 处 理 器 
private void Button Click(object sender, RoutedEventArgs e) 


| 


Student stu = new Student() | Id = 101, Name = "Tim" }; 
stu.Name = "Tom"; 
儿 准备 事件 消息 并 发 送 路 由 事件 
RoutedEventArgs arg = new RoutedEventArgs(Student. NameChangedEvent, stu); 
this.button] .RaiseEvent(arg); 
| 


Il Grid 捕捉 到 NameChangedEvent 后 的 处 理 器 

private void StudentNameChangedHandler(object sender, RoutedEventArgs e) 
| 

t 


MessageBox.Show((e.OriginalSource as Student).Id. ToString()); 


后 台 代 码 中 ， 当 界面 上 唯一 的 Button 被 单 击 后 会 触发 Button_Click 这 个 

方法 。 有 一 点 必须 注意 的 是 : 因为 Student 不 是 UIElement 的 派生 类 ， 所 

以 它 不 具有 RaiseEvent 这 个 方法 ， 为 了 发 送 路 由 事件 就 不 得 不 “借用 ”一 

下 Button 的 RaiseEvent 方 法 了 。 在 窗 体 的 构造 器 中 为 Grid 元 素 添 加 了 对 

Student.NameChangedEvent 的 侦 昕 ， 这 与 添加 对 路 由 事件 的 侦 听 没有 任 

am 。Grid 在 捕捉 到 路 由 事件 后 会 显示 事件 消息 源 (一 个 Student 实 
| JId ° 


运行 程序 并 单 击 按钮 ， 效 果 如 图 8-14 所 示 。 


E" Attached E... L 


图 8-14 ”运行 效果 


理论 上 现在 的 Student 类 已 经 算是 具有 一 个 附加 事件 了 ， 但 微软 的 官方 
文档 约定 要 为 这 个 附加 事件 添加 一 个 CLR 包 装 以 便 XAML 编 辑 姨 识别 
HHT ABETE ° 可惜 的 是 ，Student 类 并 韭 派 生 目 UIElement， 因 此 亦 
不 具备 AddHandler 和 RemoveHandler 这 两 个 方法 ， 所 以 不 能 使 用 CLR 属 
性 作为 包装 器 (因为 CLR 属 性 包装 器 的 add 和 remove 分 支 分 别 调用 当前 
对 和 象 的 AddHandler 和 RemoveHandler) 。 微 软 规定 : 


e 为 目标 UI 元 素 添 加 附加 事件 侦 听 器 的 包装 器 是 一 个 名 为 
static 方 法 ， puc (与 注册 事件 时 的 
名 称 一 致 ) * 此 方法 接收 两 个 参数 ， 参数 是 事件 的 侦 听 者 (类 
型 为 DependencyObject ) , 个 参 数 为 事件 的 处 理 需 

(RoutedEventHandler 委 托 类 型 ) 


e 解除 UI 元 素 对 附加 事件 侦 听 的 包装 右 是 名 为 Remove*Handler 的 
public static 方 法 ， 星 号 亦 为 事件 名 称 ， 参 数 与 Add*Handler 一 致 。 


按照 规范 ，Student 类 被 升级 为 这 样 : 


public class Student 
i 
J| 声明 并 定义 路 由 事件 
public static readonly RoutedEvent NameChangedEvent = EventManager. RegisterRoutedEvent 
("NameChanged", RoutingStrategy.Bubble, typeof( RoutedEventHandler), typeof(Student)); 


IL 为 界面 元 素 添加 路 由 事件 侦 听 
public static void AddNameChangedHandler(DependencyObject d, RoutedEventHandler h) 
i 
UlElement e = d as UIElement; 
if (e != null) 
{ 
e.AddHandler(Student.NameChangedEvent, h); 


I| 移 除 侦 听 
public static void RemoveNameChangedHandler(DependencyObject d, RoutedEventHandler h) 
í 
UlElement e = d as UIElement; 
if (e ' null) 
| 
e RemoveHandler(Student.NameChangedEvent, h); 


public int Id { get; set; } 
public string Name { get; set; } 


E 相应 的 改动 (只 有 添加 事件 侦 听 一 处 需要 改 
5 : 


public Window () 


| 
1 


InitializeComponent(); 


I| 为 外 层 Grid 添加 路 由 事件 侦 听 器 
Student.AddNameChangedHandler( 

this.gridMain, 

new RoutedEventHandler(this.StudentNameChangedHandler)); 


l 
j 


现在 让 我 们 仔细 理解 一 下 附加 事件 的 “附加 ”。 确 切 地 说 ，UIElement 类 
是 路 由 事件 特 主 与 附加 事件 宿主 的 分 水 岭 ， 不 单 是 因为 从 UIElement 类 
开始 才 具 备 了 在 界面 上 显示 的 能 力 ， dr M. 
RemoveHandler 这 些 方法 也 定义 在 UIElement 类 中 。 因 此 ， WIE T 
非 UIElement 派 生 类 中 注册 了 路 由 事件 ， 则 过 个 关内 实例 既 个 jme 
A (Raise) 此 路 由 事件 也 无 法 自己 侦 听 此 路 由 事件 ， HB 能 把 这 个 事件 
的 激发 “附着 > 在 某 个 具有 RaiseEvent 方 法 的 对 象 上 ， 借 助 这 个 对 象 的 
RaiseEvent 方 法 把 事件 发 送出 去 ; 事件 的 侦 听 任务 也 只 能 交 给 别 的 对 象 
去 做 。 总 之 ， 附 加 事件 只 能 算是 路 由 事件 的 一 种 用 法 而 非 一 个 新 概 
ais PUR GEWO tb URDU 这 个 概念 撤消 了 。 


注意 


最 后 分 享 些 实际 工作 中 的 经 验 : 


第 一 ， 像 Button.Click 这 些 路 由 事件 ， 因 为 事件 的 宿主 是 界面 元 素 、 本 身 束 是 UI 树 上 是 一 个 结 
点 ， 所 以 路 由 事件 路 由 时 的 第 一 站 就 是 事件 的 激发 者 。 附 加 事件 宿主 不 是 UIElement 的 派生 
类 ， 所 以 不 能 出 现在 UI 树 上 的 结 点 ， 而 且 附 加 事件 的 激发 是 借助 UI 元 素 实现 的 ， 因 此 ， 而 附加 
事件 路 由 的 第 一 站 是 激发 它 的 元 素 。 


第 二 ， 实 际 上 很 少 会 把 附 加 事件 定义 在 Student 这 种 与 业务 逻辑 相关 的 类 中 ， 一 般 都 是 定义 在 像 
Binding、Mouse、Keyboard 这 种 全 局 的 Helper 类 中 。 如 果 需 要 业务 滥 辑 类 的 对 象 能 发 送 出 路 由 
事件 来 怎么 办 ? 我 们 不 是 有 Binding 吗 ! 如 果 程 字 架 构 设 计 的 好 (使 用 数据 驱动 UI) ， 那 么 业 
务 有 逻辑 一 定 会 使 用 Binding 对 象 与 UI 元 素 关 联 ， 一 旦 与 业务 逻辑 相关 的 对 象 实现 了 
INotifyPropertyChanged 接 口 并 且 Binding 对 象 的 NotifyOnSourceUpdated 属 性 ; A tue, 则 Binding 
就 会 激发 其 SourceUpdated 附 加 事件 ， 此 事件 会 在 UI 元 素 树 上 路 由 并 被 侦 听 者 捕获 。 


9 


PE 


深入 浅 出 话 命令 


按理 说 ， 这 章 让 《三 国 演 义 》 中 的 诸葛 亮 来 讲 是 最 合适 不 过 了 “。 为 什 
AR? 因为 孔明 先生 妙计 多 多 嘛 ! 你 没 看 见 他 左 一 个 锅 宫 、 石 一 个 锦 
FRIERI RIG? 


MEERDERE! MEERE AR”, Wire NA” ean 

(Chibi-Campaign Guide) ^ «How To Borrow Arrows with Thatched 
Boats-A Step By Step Manual) ) , AZ. TVRIEBRUEX| LIRE — E — 
FRÍTT o RAAR E: “ 哦 ， 这 锦 赛 妙计 的 本 质 不 束 是 命令 
吗 ! ” 真 的 不 得 不 佩服 孔明 先生 的 管理 才能 ， 连 听 起 来 威严 生硬 的 “ 命 
令 ” 也 被 他 包装 的 如 此 漂亮 。WPF 也 为 我 们 准备 了 完善 的 命令 

(Command) 系统 ， 所 以 每 个 WPF 程 序 员 都 有 机 会 过 一 把 作 诸 葛 亮 的 


JE e 


你 可 能 会 问 : “有 了 路 由 事件 为 什么 还 需要 命令 系统 呢 ? ”事件 的 作用 
是 发 布 、 传 播 一 些 消息 ， 消 息 送 达 搂 收 者 ， 事 件 的 使 命 也 就 完成 了 ， 
至 于 如 何 响应 事件 送 来 的 消息 事件 并 不 做 规定 ， 每 个 接收 者 可 以 使 用 
自己 的 行为 来 响应 事件 。 也 就 是 说 ， 事 件 不 具有 约束 力 。 命令 与 事件 
的 区 别 就 在 于 命令 是 具有 约束 力 的 一 战场 上 ， 将 军 一 声 令 下 :“ 前 
进 ! * 无 论 是 步兵 还 是 装甲 兵 都 会 执行 同一 个 行为 MoveForward() (而 这 
个 方法 很 可 能 定义 在 BatdeUnitBase 这 个 步兵 和 装甲 兵 共同 的 基 类 
里 ) ; 同样 当 你 在 Visual Studio 菜 单 栏 上 单 击 | 和 世 | 图 标 或 按 下 Ctl++ 


Shift 十 S 时 ， 所 有 打开 的 文档 窗口 都 会 执行 Save0) 方 法 一 一 不 能 执行 统 
一 的 行为 ， 还 能 叫 “ 命 令 ” 吗 ? 


的 确 ， 实 际 编程 工作 中 就 算 只 使 用 事件 、 不 使 用 命令 ,程序 的 逻辑 也 
一 样 可 以 被 驱动 得 很 好 ， 但 我 们 不 能 阻止 程序 员 按 自己 的 习惯 去 编写 
人 代码。 比如 保存 事件 的 处 理 器 ， 程 序 员 们 可 以 写 Save) ^ 
SaveHandler0)、SaveDocument0..….. 这 些 都 符合 代码 规范 ， 但 迟早 有 一 
天 整个 项 目 会 变 得 无 法 被 读 懂 ， 新 来 的 程序 员 或 修改 bug 的 程序 员 会 很 
抓 狂 。 如 采 使 用 命令 ， 情 况 会 好 很 多 一 一 当 Save 命 令 到 达 某 个 组 件 
时 ， 命 令 会 主动 去 调用 组 件 的 Save(0) 方 法 ， 而 这 个 方法 可 能 被 定义 在 基 
类 或 者 接口 里 〈 即 保证 了 这 个 方法 一 定 是 存在 的 ) ， 这 就 在 代码 结构 
和 命名 上 做 了 约束 。 不 但 如 此 ， 命 令 还 可 控制 接收 者 “ 先 做 校 验 、 再 保 
存 、 然 后 关闭 ”， 也 融 是 说 ， 命 令 除 了 可 以 约束 代码 ， 还 可 以 约束 步 又 


逻辑 ， 这 让 新 来 的 程序 员 想 犯错 都 难 ， 也 让 修改 bug 的 程序 员 很 快 能 找 
到 规律 、 容 易 上 手 。 


既然 命令 能 帮助 我 们 降低 成 本 ， 何 乐 而 不 为 呢 ? 本章 束 让 我 们 一 同 来 
学 习 如 何 使 用 WPF 命 令 系统 。 


9.1 命令 系统 的 基本 元 素 与 关系 
9.1.1 命令 系统 的 基本 元 素 
WPF 的 命令 系统 由 几 个 基本 要 素 构 成 ， 它 们 是 : 


e 命令 (Command) : WPF 的 命令 实际 上 就 是 实现 了 ICommand 接 口 
的 类 ， 平 时 使 用 最 多 的 是 RoutedCommand 类 。 我 们 还 会 学 习 使 用 自 定 


e 命令 源 (Command Source) : BD fm Hy AXE. 是 实现 了 
ICommandSource 授 口 的 类 。 很 多 界面 元 素 都 实现 了 这 个 接口 ， 其 中 包 
括 Button、Menultem 、ListBoxItem 等 。 


e 命令 目标 (Command Target) : 即 命令 将 发 送 给 谁 ， 或 者 说 命令 将 
作用 在 谁 届 上 “。 命令 目标 必须 是 实现 了 InputElement 接 口 的 类 。 


e 命令 关联 (Command Binding) : 负责 把 一 些 外 围 逻 辑 与 命令 关联 
起 来 ， 比 如 执行 之 前 对 命令 是 否 可 以 执行 进行 判断 、 命 令 执 行 之 后 还 
有 哪些 后 续 工 作 等 。 


9.1.2 ”基本 元 素 之 间 的 关系 


这 些 基 本 元 素 之 间 的 关系 体现 在 使 用 命令 的 过 程 中 。 命 令 的 使 用 大 概 
439 AI P JLP: 


(1) 创建 命令 类 : 即 获得 一 个 实现 ICommand 接 口 的 类 ， 如 果 命 令 与 
具体 业务 逻辑 无 关 则 使 用 WPF 类 库 中 的 RoutedCommand 类 即 可 。 如 采 
想得到 与 业务 逻辑 相关 的 专 有 命令 ， 则 需 创 建 RoutedCommand (或 者 
ICommand 接 口 ) 的 派生 类 。 


(2) 声明 命令 实例 :使 用 命令 时 需要 创建 命令 类 的 实例 。 这 里 有 个 技 
巧 ， 一 般 情况 下 程序 中 某 种 操作 只 需要 一 个 命令 实例 与 之 对 应 即 可 。 


比如 对 应 “保存 ”这 个 操作 ， 你 可 以 合同 一 个 实例 去 命令 每 个 组 件 执行 
其 保存 功能 ， 因 此 程序 中 的 命令 多 使 用 单 件 模式 (Singletone Pattern) 
以 减少 代码 的 复杂 度 。 


(3) 指定 命令 的 源 : 即 指定 由 谁 来 发 送 这 个 命令 。 如 果 把 命令 看 作 炮 
弹 ， 那 么 命令 源 束 相当 于 火炮 。 同 一 个 命令 可 以 有 多 个 源 。 比 如 保存 
命令 ， 既 可 以 由 呆 单 中 的 保存 项 来 发 送 ， 也 可 以 由 工具 栏 中 的 保存 图 
标 来 发 送 。 需 要 注意 的 是 ， 一 旦 把 命令 指派 给 命令 源 ， 那 么 命令 源 就 
会 受命 令 的 影响 ， 当 命令 不 能 被 执行 的 时 候 作为 命令 源 的 控件 将 处 在 
不 可 用 状态 。 看 来 命令 这 种 炮弹 很 智能 ， 当 不 满足 发 射 条 件 时 还 会 给 
用 来 发 射 它 的 火炮 上 一 道 保 险 、 避 免 走 火 。 还 需要 注意 ， 各 种 控件 发 
送 命令 的 方法 不 尽 相 同 ， 比 如 Button 和 MenuItem 是 在 单 击 时 发 送 命 
令 ， 而 ListBoxItme 单 击 时 表示 被 选中 所 以 双击 时 才 发 送 命令 。 


(4) 指定 命令 目标 ; 命令 目标 并 不 是 命令 的 属性 而 是 命令 源 的 属性 ， 
指定 命令 目标 是 告诉 命令 源 向 哪个 组 件 发 送 命令 ， 无 论 这 个 组 件 是 否 
拥有 焦点 它 部 会 收 到 这 个 命 全。 如 琳 没 有 为 命令 源 指定 命令 目标 ， 则 
WPF 系 统 认为 当前 拥有 焦点 的 对 象 就 古 命令 目标 。 这 个 步 怠 有 所 像 为 
火炮 指定 目标 。 


(5) 设置 命令 关联 : 炮兵 是 不 能 单独 战斗 的 ， 就 像 炮兵 需要 侦查 兵 在 
射击 前 观察 敌情、 判断 发 射 时 机 ， 在 射击 后 观测 射击 效果 、 帮 助 修正 
一 样 ，WPF 命 令 需 要 CommandBinding 在 执行 前 来 帮助 判断 是 不 是 可 以 
执行 、 在 执行 后 做 一 些 事件 来 “打扫 战场 ”。 


在 命令 目标 和 命令 关联 之 间 还 有 一 个 微妙 的 关系 。 无 论 命令 目标 是 由 
程序 员 指 定 还 是 由 WPF 系 统 根 据 焦 点 所 在 地 判断 出 来 的 ， 一旦 某 个 UI 
组 件 被 命令 源 “ 有 瞄 上 ”， 命 令 源 束 会 不 停 地 癌 命 令 日 标 “ 投 石 问 路 ?"， 合 令 
目标 就 会 不 停 地 发 送出 可 路 由 的 PreviewCanExecute 和 CanExecute 附 加 
事件 ， 事 件 会 沿 着 UI 元 素 树 向 上 传递 并 被 命令 关联 所 捕捉 ， 命 令 关 联 
捕捉 到 这 些 事件 后 会 把 命令 能 不 能 发 送 实时 报告 给 命令 。 类 似 的 ， 如 
果 人 命令 被 发 送出 来 并 到 达 命 令 目 标 ， 人 命令 目 标 束 会 发 送 
PreviewExecuted 和 Executed 两 个 附加 事件 ， 这 两 个 事件 也 会 沿 着 UI 元 到 
树 回 上 传递 并 被 命令 关联 所 捕捉 ， 命 令 关 联 会 完成 一 些 后 续 的 任务 。 
别 小 看 是 “后 续 任 务 ”， 对 于 那些 与 业务 逻辑 无 关 的 通用 命令 ， 这 些 后 
续 任 务 才 是 最 重要 的 。 


你 可 能 会 问 : “命令 目标 怎么 会 发 出 PreviewCanExecute、CanExecute、 

PreviewExecuted 和 Executed 事 件 呢 ? ”其 实 这 4 个 事件 都 是 附加 事件 ， 是 
被 CommandManager 类 “附加 ”给 命令 目标 的 。 大 家 可 以 翻 过 头 再 去 理解 
一 下 附加 事件 。 另 外 ，PreviewCanExecute 和 CanExecute 的 执行 时 机 不 
由 程序 员 控 制 ， 而 且 执 行 频 率 比 较 高 ， 这 不 但 会 给 系统 性 能 这 来 些 降 
低 ， 偶 尔 还 会 引入 几 个 意 想 不 到 的 bug 并 且 比 较 难 调试 ， 务 请 多 加 小 
IÒ o 
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捕 提 并 处 理 路 由 事件 ， 
向 命令 反馈 消息 


| |i 发 
状 | | 有 路 由 
态 事件 
拥有 
探知 命令 可 和 否 执行 
发 送 命令 
图 9-1 关系 图 


9.1.3 “小 试 命令 

说 起 来 很 热 闸 ， 现 在 让 我 们 动手 实践 一 下 。 实 现 这 样 一 个 需求 : 定义 
一 个 命令 ， 使 用 Button 来 发 送 这 个 命令 ， 当 命令 送 达 TextBox 时 TextBox 
会 被 清空 (如果 TextBox 中 没有 文字 则 命令 不 可 被 发 送 ) 。 


程序 的 XAML 界 面 代码 如 下 : 


«Window x:Class-"WpfApplicationl Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Command" 
Background-"LightBlue" Height-"175" Width-"260"» 

«StackPanel x:Name-"stackPanel" 
«Button x:Name-"button]" Content-"Send Command" Margin-"5" /> 
«TextBox x:Name-"textBoxA" Margin-"5,0" Height-" 100" /> 
x/StackPanel^ 


«/Nindow» 
后 台 代码 为 : 
public partial class Window1 : Window 
| 
public Window1() 
i 
InitializeComponent(); 
InitializeCommand(); 


} 


放声 明 并 定义 命令 
private RoutedCommand clearCmd = new RoutedCommand("Clear", typeof(Window1)); 


private void InitializeCommand() 


i 
I| 把 命令 赋值 给 命令 源 〈 发 送 者 ) 并 指定 快捷 键 
this.button1.Command = this.clearCmd; 
this.clearCmd.InputGestures.Add(new KeyGesture(Key.C, ModifierKeys.Alt)); 


I| 指定 命令 目标 
this.button 1.CommandTarget = this.textBoxA; 


/ 创建 命令 关联 

CommandBinding cb =new CommandBinding(); 

cb.Command - this.clearCmd; Il 只 关注 与 clearCmd 相关 的 事件 
cb.CanExecute += new CanExecuteRoutedEventHandler(cb CanExecute); 
cb.Executed += new ExecutedRoutedEventHandler(cb Executed); 


I| 把 命令 关联 安置 在 外 围 控 件 上 
this.stackPanel.CommandBindings.Add(cb); 


I 当 探测 命令 是 否 可 以 执行 时 ， 此 方法 被 调用 
void cb CanExecute(object sender, CanExecuteRoutedEventArgs e) 


| 
if (string.IsNullOrEmpty(this.textBoxA. Text)) 


{ e.CanExecute = false; } 


else 
| e.CanExecute = true; } 


避免 继续 加 上 传 而 降低 程序 性 能 
e.Handled = true; 


I| 当 命令 送 达 目 标 后 ， 此 方法 被 调用 
void cb Executed(object sender, ExecutedRoutedEventArgs e) 


| 
this.textBoxA.Clear(); 


IL 避免 继续 癌 上 传 而 降低 程序 性 能 


e.Handled true; 


| 


运行 程序 ， 在 TextBox 中 输入 文字 后 Button 在 命令 可 执行 状态 的 影响 下 
变 为 可 用 ， 此 时 单 击 Button 或 者 按 Alt 十 C 键 ，TextBox 都 会 被 清空 ， 效 
果 如 图 9-2 所 示 。 


E Command mesm E Command 


Send Command 
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图 9-2 ”运行 效果 


注意 
对 于 上 面 代码 有 几 点 需要 注意 的 地 方 : 
第 一 ， 使 用 命令 可 以 避免 自己 写 代码 判断 Button 是 否 可 用 以 及 添加 快捷 键 。 


第 二 ，RoutedCommand 是 一 个 与 业务 逻辑 无 关 的 类 ， 只 负责 在 程序 中 “跑腿 ”而 并 不 对 命令 目标 
做 任何 操作 ，TextBox 并 不 是 由 它 清 空 的 。 那 么 对 TextBox 的 清 空 操作 是 谁 做 的 呢 ? 答案 是 
CommandBinding ° 因为 无 论 是 探测 命令 是 否 执行 还 是 命令 送 达 目标 ， 都 会 激发 命令 目 标 发 送 
由 事件 ， 这 些 路 由 事件 会 沿 着 UI 元 素 树 向 上 传递 并 最 终 被 CommandBinding 所 捕捉 。 本 例 中 
CommandBinding 被 安装 在 外 围 的 StackPanel 上 ， CommandBinding^ “站 在 高 处 ?起 一 个 侦 听 器 的 作 
用 ， 而 且 专门 针对 clearCmd 命 令 捕捉 与 其 相关 的 路 由 事件 。 本 例 中 ， 当 CommandBinding 捕 f 
到 CanExecute 事 件 就 会 调用 cb_CanExecute 方 法 (判断 命令 执行 的 条 件 是 否 满足 ， 并 反馈 给 命令 
供 其 影响 命令 源 的 状态 ) ; NEL 1 的 是 Executed 事 件 (表示 命令 的 Execute 方 法 Eo ES 
或 说 命令 已 经 作用 在 了 命令 目标 上 ，RoutedCommand 的 Execute 方 法 不 包含 业务 逻辑 、 只 负 
让 命令 目标 激发 Executed) ， 则 调用 cb_Executed 方 法 。 
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第 三 ， 因 为 CanExecute 事 件 的 激发 频率 比较 高 ， 为 了 避免 降低 性 能 ， 在 处 理 完 后 建议 把 
e.Handled 设 为 true。 


第 四 ，CommandBinding 一 定 要 设置 在 命令 目标 的 外 围 控件 上 ， 不 然 无 法 捕捉 到 CanExecute 和 
Executed 等 路 由 事件 。 


9.1.4 WPE 的 命令 库 
上 面 这 个 例子 中 我 们 自己 声明 定义 了 一 个 命令 


private RoutedCommand clearCmd = new RoutedCommand("Clear", typeof( Window!)); 


命令 具有 “一 处 声明 、 处 处 使 用 ”的 特点 ， 比 如 Save 命 令 ， 在 程序 的 任何 
地 方 它 都 表示 要 求 命令 T 标 保存 数据 。 因 此 ， 微 软 在 WPF 类 库 里 准备 
了 一 些 便捷 的 命令 fe. 这 些 命令 库 包 括 : 


e ApplicationCommands 
e ComponentCommands 
e NavigationCommands 
e MediaCommands 


e 上 ditingCommands 


Ef TIGRE GAS, 而 命令 就 是 用 这 些 类 的 静态 只 读 属 性 以 单 件 模式 暴 
露出 来 的 。 例 如 : ApplicationCommands X 3i &) 4 T CancelPrint ^ 

Close ^ ContextMenu ^ Copy ^ CorrectionList ^ Cut ^ Delete ^ Find ^ 

Help ` New ` NotACommand ^ Open ^ Paste ^ Print ^ PrintPreview ^ 

PPE ` Redo ` Replace ` Save ` SaveAs ` SelectAll ` Stop ` Undo3X 
些 命令 ， 而 它们 的 源码 示意 如 下 : 


public static class ApplicationCommands 


f 
l 


public static RoutedUICommand Cut | get | /*...*/ | | 


public static RoutedUICommand Copy 1 get | /*...*/ j ] 
public static RoutedUICommand Paste | get { /*...*/ } ] 
public static RoutedUICommand Delete | get { /*...*/ } ] 
public static RoutedUICommand Undo | get | /*...*/ | | 


public static RoutedUICommand Redo | get | /*...*/ ] | 


其 他 几 个 命令 库 也 与 之 类 似 。 如 果 你 的 程序 中 需要 诸如 Open、Save、 
、Stop 等 标准 命令 那 就 没 必 要 自己 声明 了 ， 直 接 拿 命 令 库 来 用 就 好 


9.1.5 ”命令 参数 


前 面 提 到 命令 库 里 有 很 多 WPF 预 制 的 命令 ， 如 New ` Open ^ Copy ^ 
Cut、Paste 等 。 这 些 命令 都 是 ApplicationCommands 类 的 静态 属性 ， 所 以 
它们 的 实例 永远 只 有 一 个 ， 这 就 引出 一 个 问题 ， 如 果 界 面 上 有 两 个 按 
钮 ， 一 个 用 来 新 建 Teacher 的 档案 ， 另 一 个 用 来 新 建 Student 的 档案 ， 都 
使 用 New 命 令 的 话 ， 程 序 应 该 如 何 区 别 新 建 的 是 什么 档案 呢 ? 


答案 是 使 用 CommandPrameter。 命 令 源 一 定 是 实现 了 ICommandSource 
接口 的 对 象 ， 而 ICommandSource 有 一 个 属性 就 是 CommandPrameter ， 
如 果 把 命令 看 作 飞 回 目 标的 炮弹 ， 那 么 CommandPrameter 了 驶 相当 于 闭 载 
在 炮弹 肚子 里 的 “消息 >”。 下 面 是 程序 的 实现 代码 。 


XAML 代 码 如 下 : 


«Window x:Class-"CommandPrameterSample.MainWindow" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Command Prameter" 
Height-"240" Width-"360" Background" LightBlue" WindowStyle-"ToolWindow"» 

«Grid Margin-"6"» 
«Orid.RowDefinitions» 
<RowDefinition Height-"24" /> 
<RowDefinition Height-"4" /> 
<RowDefinition Height-"24" /> 
<RowDefinition Height="4" /> 
<RowDefinition Height="24" /> 
<RowDefinition Height="4" /> 
<RowDefinition Height="*" /> 
</Grid.RowDefinitions> 
<!-- 命 令 和 命令 参数 --> 
<TextBlock Text-"Name:" VerticalAlignment-"Center" HorizontalAlignment-" Left" 
Grid. Row-"0" /> 
«TextBox x:Name-"nameTextBox" Margin-"60, 0,0,0" Grid. Row-"0" /> 
«Button Content-"New Teacher" Commandz" New" CommandParameterz "Teacher 
Grid.Row-"2" (> 
«Button Content-"New Student" Command" New" CommandParameterz" Student" 
Grid.Row-"4" /> 
«ListBox x:Name-"listBoxNewltems" Grid.Row-"6" /> 
</Grid> 
<|-- 为 窗 体 添加 CommandBinding--> 


«Window.CommandBindings» 


" 


«CommandBinding Commandz" New" CanExecutez "New CanExecute" 
Executedz" New Executed" /> 
«/Window.CommandBindings» 


</Window> 


注意 


代码 有 两 个 值得 注意 的 地 方 : 
两 个 按钮 都 使 


用 New 命 令 ， 但 分 别 使 用 字符 串 Teacher 和 Student 作 为 参数 。 


这 次 是 使 用 XAML 代码 为 窗 体 添加 CommandBinding , CommandBinding 的 CanExecute 和 
Executed 事 件 处 理 器 写 在 后 人 台 C# 代 码 里 。 


CommandBinding 的 两 个 事件 处 理 硕 代码 如 下 ; 


private void New. CanExecute(object sender, CanExecuteRoutedEventArgs e) 
i 

if (string.IsNullOrEmpty(this.nameTextBox.Text) ) 

í 

e.CanExecute = false; 

| 

else 

| 


e.CanExecute = true; 


private void New Executed(object sender, ExecutedRoutedEventArgs e) 
| 
string name = this.nameTextBox.Text; 
if (e.Parameter.ToString() == "Teacher" ) 
{ 
this. listBoxNewItems.Items.Add(string.Format("New Teacher: {0}, "ij. HAT. ", name)); 
| 
if (e.Parameter.ToString() == "Student") 
| 
this.listBoxNewltems.Items.Add(string.Format("New Student: {0}， 好 好 学 习 、 天 天 向上 。" name)); 


运行 程序 ， 当 TextBox 中 没有 内 容 时 两 个 按钮 均 不 可 用 ; 当 输 入 文字 后 
按钮 变 为 可 用 ， 单 击 按钮 ，ListBox 会 加 入 不 同 条 目 。 效 果 如 图 9-3 所 
ZR œ 


Command Prameter ) Command Prameter 


wee | 
New Student Timothy, 好 好 学 习 、 天 天 向 上 ， 
New Teacher: Timothy, TNR, SAFE: 


Klo-3 ”运行 效果 
9.1.6 ”命令 与 Binding 的 结合 


初试 命令 ， 你 可 能 会 想到 这 样 一 个 问题 : 控件 有 很 多 事件 ， 可 以 让 我 
们 进行 各 种 各 样 不 同 的 操作 ， 可 控件 只 有 一 个 Command 属 性 、 而 命令 
库 中 却 有 数 十 种 命令 ， 这 样 怎 么 可 能 使 用 这 个 唯一 的 Command 属 性 来 
调用 那么 多 种 命令 呢 ? 答案 是 : 使 用 Binding。 前面 已 经 说 过 ，Binding 
作为 一 种 间接 的 、 不 固定 的 赋值 手段 ， 可 以 让 你 有 机 会 选择 在 某 个 条 
件 下 为 目标 赋 特 定 的 值 (有 时候 需 要 借助 Converter) ° 


例如 ， 如 有 条 一 个 Button 所 关联 命令 有 可 能 根据 菏泽 条 件 而 改变 ， 我 们 可 
以 把 代码 写成 这 样 : 


«Button x:Name-"dynamicCmdBtn" Command-" [Binding Path=ppp, Source-sss; " Content-" Command" /> 


不 过 话说 回来 ， 因 为 大 多 数 命令 按钮 都 有 相对 应 的 图 标 来 表示 固定 的 
含义 ， 所 以 日 常 工作 中 一 个 控件 的 命令 一 经 确定 就 很 少 改变 。 


9.2” 近 观 命令 


一 般 情 况 下 ， 程 序 中 使 用 与 逻辑 无 关 的 RoutedCommand 来 跑 跑 龙套 就 
足够 了 ， 但 为 了 使 程序 的 结构 更 加 简洁 〈 比 如 去 掉 外 围 的 
CommandBinding 和 与 之 相关 的 事件 处 理 器 ) ， 我 们 常 需要 定义 自己 的 
命令 。 本 万 中 我 们 走 近 WPEF 人 命令， 人 移 由 剖析 RoutedCommand 入 手 ， 再 
创建 自己 的 命令 。 


9.2.1 ICommand 接 口 与 RoutedCommand 


WPFE 的 命令 是 实现 了 ICommand 接 口 的 类 。ICommand 接 口 非 销 人 简单 ， 
只 包含 两 个 方法 和 一 个 事件 : 


e Execute 方 法 : 命令 执行 ， 或 者 说 命令 作用 于 命令 目标 之 上 。 和 需要 注 
意 的 是 ， 现 实 世 界 中 的 命令 是 不 会 自己 “执行 ?的 ， 它 只 能 “被 执行 "， 而 
在 这 里 ， 执 行 变 成 了 命令 的 方法 ， 颇 有 点 儿 拟人 化 的 味道 。 


e CanExecute 方 法 : 在 执行 之 前 用 来 探知 命令 是 否 可 被 执行 。 


e CanExecuteChanged 事 件 : 当 命 令 可 执行 状态 发 生 改 变 时 ， 可 激发 
此 事件 来 通知 其 他 对 象 。 


RoutedCommand Wi Œ iX FÉ — ^^ X HE f ICommand 接口 的 类 e 
RoutedCommand 在 实现 ICommand 接 口 时 ， 并 未 同 Execute 和 CanExecute 
方法 中 添加 任何 逻辑 ， 也 就 是 说 ， 它 是 通用 的 、 与 具体 业务 逻辑 无 关 
的 。 怎 么 理解 这 个 “与 具体 业务 逻辑 无 关 的 ? 呢 ? 让 我 们 从 外 部 和 内 部 
两 方面 来 理解 。 


从 外 部 来 看 ， 让 我 们 回顾 一 下 ApplicationCommands 命 令 库 里 的 命令 
fî]: 


public static class ApplicationCommands 


! 
1 


public static RoutedUICommand Cut { get | /*...*/ | ) 
public static RoutedUlCommand Paste | get | /*...*/ 
public static RoutedUICommand Delete { get | /*...*/ | j 
public static RoutedUICommand Undo | get { /*...*/ ] ] 
N 
jJj 


public static RoutedUICommand Copy | get | /*...*/ } } 
1 
| 


\ 
| 
public static RoutedUICommand Redo | get | /*...*/ 


1 
! 


虽然 他 们 都 有 自己 的 名 字 ClliCopy ^ Paste ^ Cut ^ Delete) ， 但 它们 都 
是 普 普 通通 的 RoutedUICommand 类 实例 。 也 就 是 说 ， 当 一 个 命令 到 达 
命令 目标 后 ， 有 具体 是 执行 Copy 还 是 Cut 〈 即 业务 逻辑 ) 不 是 由 命令 决定 
的 ， 而 是 外 围 的 CommandBinding 捕 获 到 命令 目标 受命 令 激发 而 发 送 的 
路 由 事件 后 在 其 Executed 事 件 处 理 需 中 完成 。 换 名 话说， 就 算 你 的 
人 捉 到 Copy 命 令 后 执行 的 是 清除 操作 也 与 命令 无 


从 内 部 分 析 ， 我 们 就 要 读 读 RoutedCommand 的 源码 了 。 
RoutedCommand 类 与 命令 执行 相关 的 代码 简化 如 下 : 


public class RoutedCommand : ICommand 


| 
Il H ICommand 继承 而 来 ， 仅 供 内 部 使 用 


private void ICommand.Execute(object parameter) 


{ 
Execute(parameter, FilterInputElement(Keyboard.FocusedElement)); 


IL 新 定义 的 方法 ， 可 由 外 部 调用 
public void Execute(object parameter, IInputElement target) 
{ 
I| 命令 目标 为 空 ， 选 定 当前 具有 焦点 的 控件 作为 目标 
if (target — null) 
| 
target = FilterInputElement(Keyboard.FocusedElement); 


I| 真正 执行 命令 的 逻辑 
ExecuteImpl(parameter, target, false); 


J| 真正 执行 命令 的 逻辑 ， 仅 供 内 部 使 用 
private bool ExecuteImpl(object parameter, IInputElement target, bool userInitiated) 
| 
TES 
UlElement targetUIElement = target as UIElement; 
fas 
ExecutedRoutedEventArgs args = new ExecutedRoutedEventArgs(this, parameter); 
args.RoutedEvent = CommandManager.PreviewExecutedEvent; 


if (targetUIElement != null) 
| 


targetUIElement,RaiseEvent(args, userlnitiated); 


return false; 


| 


I| 另 一 个 调用 ExecuteImpl 方法 的 函数 ， 依 序 集 级 别 可 用 
internal bool ExecuteCore(object parameter, IInputElement target, bool userlnitiated) 


f 
1 


if (target — null) 


| 
target = FilterInputElement(Keyboard.FocusedElement); 


retum ExecuteImpl(parameter, target, userInitiated); 


阅读 代码 我 们 可 以 发 现 ， 从 ICommand 接 口 继承 来 的 Execute 并 没有 被 公 
F 〈 甚 至 可 以 说 是 废弃 不 用 了 ) ， 仅 仅 是 调用 新 声明 的 带 两 个 参数 的 
Execute 方 法 。 新 声明 的 带 两 个 参数 的 Execute 方 法 是 对 外 公开 的 ， 可 以 
使 用 第 一 个 参数 同 命 令 传 递 一 些 数据 ， 第 二 个 参数 是 命令 的 目标 ， 如 
果 目 标 为 null，Execute 方 法 就 把 当前 拥有 焦点 的 控件 作为 命令 的 目标 。 


新 的 Execute 方 法 会 调用 命令 执行 逻辑 的 核心 ExecuteImpl 方 法 

(ExecuteImplzé Execute Implement 的 缩写 ) ， 而 这 个 方法 内 部 并 没有 
什么 神秘 的 东西 ， 人 简要 而 言 束 是 “借用 ”命令 目标 的 RaiseEvent 把 
RoutedEvent 发 送出 去 。 显 然 ， 这 个 事件 会 被 外 围 的 CommandBinding 捕 
获 到 然后 执行 程序 员 预 设 的 与 业务 相关 的 逻辑 。 


最 后 ， 我 们 以 ButtonBase 为 例 看 看 UI 探 件 是 如 何 发 送 命 令 的 。 
ButtonBase 是 在 Click 事 件 发 生 时 发 送 命令 的 ， 而 Click 事 件 的 激发 是 放 
在 OnClick 方 法 里 。ButtonBase 的 OnClick 方 法 如 下 : 


public class ButtonBase: ContentControl, ICommandSource 


Í 
1 


I| 激发 Click 路 由 事件 ， 然 后 发 送 命令 

protected virtual void OnClick() 
RoutedEventArgs newEvent = new RoutedEventArgs(ButtonBase.ClickEvent, this); 
RaiseEvent(newEvent); 


IL 调用 内 部 类 CommandHelpers 的 ExecuteCommandSource 方法 


MS.Intemal.Commands.CommandHelpers.ExecuteCommandSource(this ); 


ButtonBase 调 用 了 一 个 .NET Framework 内 部 类 〈 这 个 类 没有 回程 序 员 暴 
露 ) CommandHelpers 的 ExecuteCommandSource 方 法 ， 并 把 ButtonBase 
对 象 自己 当 作 参数 传 了 进去 。 如 采 我 们 走 进 ExecuteCommandSource 方 
法 内 部 瓯 会 发 现 这 个 方法 实际 上 有 是 把 传 进来 的 参数 当 作 命令 源 、 调 用 
命令 源 的 ExecuteCore 方 法 〈 本 质 上 是 调用 其 ExecuteImpl 方 法 ) 、 获 取 
De (命令 目标 ) 并 使 命令 作用 于 命令 目标 


internal static class CommandHelpers 


| 
ha 


internal static void ExecuteCommandSource(ICommandSource commandSource) 


| 


CriticalExecuteCommandSource(commandSource, false); 


internal static void CriticalExecuteCommandSource(ICommandSource commandSource, bool userlnitiated) 


| 


ICommand command = commandSource.Command; 

if (command != null) 

{ 
object parameter = commandSource.CommandParameter; 
IInputElement target  commandSource.CommandTarget; 


RoutedCommand routed = command as RoutedCommand; 
if (routed (= null) 


i 
if (target = null) 


| 


target = commandSource as IInputElement; 


} 
if (routed,CanExecute(parameter, target)) 


routed.ExecuteCore(parameter, target, userInitiated); 


} 


else if (command.CanExecute(parameter)) 


| 


command.Execute(parameter); 


9.2.2 ÉX Command 


说 到 * 目 定义 命令 ”， 我 们 可 以 分 两 个 层次 来 理解 。 第 一 个 层次 比较 
浅 ， 指 的 是 当 WPF 命 令 库 中 没有 包含 想 要 的 命令 时 ， 我 们 束 得 声明 定 
义 目 己 的 RoutedCommand 实 例 。 比 如 你 想 让 命令 目标 在 命令 到 达 时 发 
出 笑 声 ，WPF 命 令 库 里 没有 这 个 命令 ， 那 就 可 以 定义 一 个 名 为 Laugh 的 
RoutedCommand 实 例 。 很 难说 这 是 真正 意义 上 的 “ 自 定义 命令 ”， 这 只 
是 对 RoutedCommand 的 使 用 。 第 二 个 层次 是 指 从 实现 ICommand 接 口 开 
始 ， 定 义 目 己 的 命令 并 且 把 某 些 业务 逻辑 也 包含 在 命令 之 中 ， 这 才 称 
得 上 是 真正 意义 上 的 目 定 义 命 令 。 但 比较 环 手 的 是 ， 在 WPEF 的 命令 系 
统 中 命令 源 (包括 ButtonBase ^ Menultem ^ ListBoxltem ^ 
Hyperlink) 、RoutedCommand 和 CommandBinding 三 者 互相 依赖 的 相当 
紧密 。 在 源码 级 别 上 ， 不 但 没有 将 与 命令 相关 的 方法 声明 为 virtual 以 供 
我 们 重 写 ， 而 且 还 有 很 多 未 向 程序 员 公 开 的 逻辑 (比如 对 ExecuteCore 
和 CanExecuteCore 这 些 方法 的 声明 和 调用 ) 。 换 句 话 说，WPF 上 自 带 的 命 
令 源 和 CommandBinding 束 是 专门 为 RoutedCommand 而 编写 的 ， 如 果 我 
们 想 使 用 自己 的 ICommand 派 生 类 就 必须 连 命 令 源 一 起 实现 ( 即 实现 
ICommandSource 接 口 ) 。 因 此 ， 为 了 人 徐 便 地 使 用 WPF 这 套 成 熟 的 体 
系 ， 为 了 更 高 效率 地 “从 零 开 始 ” 打 造 目 己 的 命令 系统 ， 需 要 我 们 根据 
项 目的 实际 情况 进行 权衡 。 


既然 本 节 名 为 自 定义 命令 ， 那 么 我 们 就 从 实现 ICommand 接 口 开始 、 打 
造 一 个 " 纯 手工 的 自 定义 命令 。 


前 面 已 经 多 次 提 到 ，RoutedCommand 与 业务 逻辑 无 关 ， 业 务 逻 辑 要 依 
徘 外 围 的 CommandBinding 来 实现 。 这 样 一 来 ， 如 采 对 CommandBinding 
管理 不 善 就 有 可 能 造成 代码 杂乱 无 革 ， 毕 竟 一 个 CommandBinding 要 这 
扯 到 谁 是 它 的 宿主 以 及 它 的 两 个 事件 处 理 絮 。 


为 了 简化 使 用 CommandBinding 来 处 理 业 务 逻 辑 的 程序 结构 ， 我 们 可 能 
会 希望 把 业务 逻辑 移入 命令 的 Execute 方 法 内 。 比 如 ， 我 们 可 以 目 定 义 
一 个 名 为 Save 的 命令 ， 当 命令 到 达 命 令 目 标的 时 候 先 通过 命令 目标 的 
IsChanged 属 性 判断 命令 目标 的 内 容 是 否 已 经 被 改变 ， 如 采 已 经 改变 则 
命令 可 以 执行 ， 命 令 的 执行 会 直接 调用 命令 目标 的 Save 方 法 、 张 动 命 
令 目 标 以 目 己 的 方式 保存 数据 。 很 显然 ， 这 回 是 命令 直接 在 命令 目标 
上 起 作用 了 ， 而 不 像 RoutedCommand 那 样 先 在 命令 目标 上 激发 出 路 由 
事件 等 外 围 探 件 捕 捉 到 事件 后 再 “ 翻 过 头 来 ?对 命令 目标 加 以 处 理 。 你 


可 能 会 问 : “如 果 命 令 目 标 不 包含 IChanged 和 Save 方 法 怎么 办 ? ”这 就 
要 靠 接 口 来 约束 了 ， 如 果 我 在 程序 中 定义 这 样 一 个 接口 ; 


public interface IView 
| 
I| 属性 
bool IsChanged | get; set; } 


I| 方法 

void SetBinding(); 
void Refresh(; 
void Clear(); 

void Save(); 


1 
| 


并 且 要 求 每 个 需要 接受 命令 的 组 件 都 必须 实现 这 个 接口 ， 这 样 就 确保 
了 命令 可 以 成 功 地 对 它们 执行 操作 。 


接 下 来 ， 我 们 实现 ICommand 接 口 ， 创 建 一 个 专门 作用 于 IView 派 生 类 


Ws 


ll Be Xin 
public class ClearCommand : Command 


f 
1 


I| 当 命令 可 执行 状态 发 生 改 变 时 ， 应 当 被 激发 


public event EventHandler CanExecuteChanged; 


I| 用 于 判断 命令 是 否 可 以 执行 〈 暂 不 实现 ) 
public bool CanExecute(object parameter) 


Í 
t 


throw new NotImplementedException(); 


| 


I| 命令 执行 ， 带 有 与 业务 相关 的 Clear 逻辑 
public void Execute(object parameter) 
| 

IView view = parameter as IView; 

If (view != null) 

f 


i 
view.Clear(); 


fip & SE: XN f ICommand dZ O Jf 4E 7K T CanExecuteChanged 事件、 
CanExecute 方 法 和 Execute 方 法 。 目 前 这 个 命令 比较 简单 ， 只 用 到 了 
Execute 方 法 。 在 实现 这 个 方法 时 ， 我 们 将 这 个 方法 唯一 的 参数 作为 命 
令 的 目标 ， 如 果 目 标 是 TView 接 口 的 派生 类 则 调用 其 Clear 方 法 
然 ， 我 们 已 经 把 业务 逻辑 引入 了 命令 的 Execute 方 法 中 。 


有 了 目 定 义 命令 ， 我 们 拿 什 么 命令 源 来 “发 射 ”* 它 呢 ? 前 面 说 过 ，WPF 
命令 系统 的 命令 源 是 专门 为 RoutedCommand 谁 备 的 并 且 不 能 重 写 ， 所 
以 我 们 只 能 通过 实现 ICommandSource 接 口 来 创建 自己 的 命令 源 。 代 码 
如 下 : 


显 


I| Bu ds 
public class MyCommandSource : UserControl, ICommandSource 


j 
1 


II 继承 自 ICommandSource 的 三 个 属性 

public ICommand Command { get; set; } 

public object CommandParameter { get; set; } 
public TInputElement CommandTarget | get; set; } 


I| 在 组 件 被 单 击 时 连带 执行 命令 
protected override void OnMouseLeftButtonDown(MouseButtonEventArys e) 


base.OnMouseLeftButtonDown(e); 


I| 在 命令 目标 上 执行 命令 ， 或 称 让 命令 作用 于 命令 目标 
if (this.CommandTarget != null) 


f 
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this.Command. Execute(this.CommandTarget); 


ICommandSource 接口 K & & Command ^ CommandParameter 和 
CommandTarget — NJEE, Z Tx — T B EZ BUB fF ATREBJA IR LEUB 
我 们 怎么 实现 了 。 在 本 例 中 ，CommandParameter 完 全 没有 被 用 到 ， 而 
CommandTarget 被 当 作 参数 传递 给 了 Command 的 Execute 方 法 。 命 令 不 
会 自己 被 发 出 ， 所 以 一 定 要 为 命令 的 执行 选择 一 个 合适 的 时 机 ， 本 例 
中 我 们 在 控件 被 左 单 击 时 执行 命令 。 


现在 命令 和 命令 源 都 有 了 ， 还 差 一 个 可 用 的 命令 目标 。 因 为 我 们 的 
ClearCommand 专 门 作用 于 IView 的 派生 类 ， 所 以 合格 的 ClearCommand 
命令 目标 必须 实现 IView 接 口 。 设 计 这 种 既 有 UI 又 需要 实现 接口 的 类 可 
以 先 用 XAML 编 辑 器 实现 其 UI 部 分 再 找到 它 的 后 台 C# 代 码 实 现 接口 ， 

原理 很 简单 ，WPF 会 自动 为 UI 元 素 类 添加 partial 关 键 字 修饰 ，XAML 代 
码 会 被 翻译 成 类 的 一 个 部 分 ， 后 台 代 码 是 类 的 另 一 个 部 分 (其 至 可 以 


再 多 添加 几 个 部 分 ) ， 我 们 可 以 在 后 台 代 码 部 分 指定 基 类 或 实现 接 
口 ， 最 终 这 些 部 分 会 被 编译 到 一 起 。 


这 个 组 件 的 XAML 部 分 如 下 : 


<UserControl x:Class-"WpfApplicationl .MiniView" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Height-"] 14" Width-"200"» 
«Border ComerRadius-" 5" BorderBrush-"LawnGreen" BorderThickness-"2"» 
«StackPanel» 
«TextBox x:Name-"textBox |" Margin-"5" /> 
«TextBox x: Name-"textBox2" Margin-" 5,0" /> 
«TextBox x:Name-"textBox3" Margin-"5" /> 
«TextBox x:Name-"textBox4" Margin-"5,0" /> 
«/StackPanel^ 
</Border> 
</UserControl> 


它 的 后 台 代 码 部 分 如 下 : 


ll BELMA HR 
public partial class MiniView : UserControl, IView 
| 
I| 构造 器 
public MiniView() 
| 
InitializeComponent(); 


| 


I| 继承 自 IView 的 成 员 们 

public bool IsSChanged { get; set; } 
public void SetBinding() [/^..^/ — | 
public void Refresh) { /*..*/] 
publie void Save() (/*...*/] 


Il 用 于 清除 内 容 的 业务 逻辑 

public void Clear() 

| 
this.textBox l.Clear(); 
this.textBox2.Clear(); 
this.textBox3.Clear( ); 
this.textBox4.Clear(); 


因为 我 们 只 演示 命令 对 Clear 方 法 的 调用 ， 所 以 其 他 几 个 方法 没有 具体 
实现 。 当 Clear 方 法 家 调用 的 时 候 ， 它 的 儿 个 TextBox 会 被 清空 。 

最 后 是 把 自 定 义 的 命令 、 命 令 源 和 命令 目标 集成 起 来 。 窗 体 的 XAML 
代码 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local-"clr-namespace: WpfApplication]" Title-"Command" Height-"205" 
Width-"250"» 

<StackPanel> 
<local:MyCommandSource x:Name="ctrlClear" Margin= 10"> 

<TextBlock Text-" i05" FontSize-" 16" TextAlignment-"Center" 
Background-"LightGreen" Width-"80" /> 

«/local:MyCommandSource» 
«|ocal:MiniView x: Name-"miniView" /> 

«/StackPanel» 

«Window? 


本 例 中 使 用 了 简单 的 文本 作为 命令 源 的 显示 内 容 ， 实际 工作 中 你 可 以 
使 用 图 标 、 按 钮 或 更 复杂 的 内 容 来 填充 它 ， 但 要 注意 适当 更 改 激发 命 
令 的 方法 。 比 如 你 打算 在 里 面 放 置 一 个 按钮 ， 那么 就 不 要 用 和 鲁 写 
OnMouseLeftButtonDown 的 方法 来 执行 命令 了 ， 而 应 该 捕捉 
Button. Ve 2 件 并 在 事件 处 理 器 中 执行 方法 (Mouse 事件 会 被 
Button“ IZ”) ° 


后 合 C# 代 码 如 下 : 


public partial class Window! : Window 


f 
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public Window1() 
| 


InitializeComponent(); 


省 声明 命令 并 使 命令 源 和 目标 与 之 关联 
ClearCommand clearCmd = new ClearCommand(); 
this.etriClear.Command = clearCmd; 
this.ctrlClear.CommandTarget = this.miniView; 


我 们 移 创 建 了 一 个 ClearCommand 命 令 的 实例 并 把 它 赋值 给 目 定 义 命令 
源 的 Command 属 性 ， 目 定义 命令 源 的 CommandTarget 属 性 值 是 目 定 义 命 
令 目 标 MiniView 的 实例 。 提 醒 一 句 : 为 了 讲解 清晰 才 把 命令 声明 放 在 
， 正 规 的 方法 应 该 是 把 命令 声明 在 静态 全 局 的 地 方 供 所 有 对 象 使 


运行 程序 ， 在 TextBox 里 输入 文字 再 单 击 “ 清 除 ? 控 件 ， 效 果 如 图 9-4 所 
ZR œ 


8 ' Command 


E Command 
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图 9-4 ”运行 效果 


至 此 ， 一 个 简单 的 自 定义 命令 就 完成 了 。 若 想 通 过 Command 的 
CanExecute 方 法 返回 值 来 影 啊 命令 源 的 状态 ， 还 需要 使 用 ICommand 和 
ICommandSource 接 口 的 成 员 组 成 更 复杂 的 逻辑 ， 介 于 篇 幅 原 因 不 再 敖 


10 
深入 浅 出 话 资源 
我 们 把 有 用 的 东西 称 为 资源 。“ 兵 马 未 动 ， 粮 草 先行 ”程序 中 的 各 


种 数据 就 是 算法 的 原料 和 粮草 。 程 序 中 可 以 存放 数据 的 地 方 有 很 多 ， 
可 以 放 在 数据 库 里 、 可 以 存储 在 变量 里 。 界 于 数据 库存 储 和 变量 存储 


之 间 ， 我 们 还 可 以 把 数据 存储 在 程序 主体 之 外 的 文件 里。 。 外 部 文件 与 
程序 主体 分 离 ， 这 束 有 可 能 丢失 或 损坏 ， 为 了 避免 丢失 或 损坏 ， 编 详 
句 允 许 我 们 把 外 部 文件 编译 进程 序 主体 、 成 为 程序 主体 不 可 分 割 的 一 
部 分 ， 这 就 是 传统 意义 上 的 程序 资源 〈 也 称 为 二 进 制 资源 ) 。 


WPF 不 但 文 持 程 序 级 的 传统 资源 ， 同 时 还 推出 了 独 具 特 色 的 对 象 级 资 
产 ， 每 个 界面 元 素 痢 可 以 携 市 目 己 的 资源 并 可 被 目 己 的 子 级 元 素 共 
宇 。 比 如 后 面 革 字 要 讲 到 的 各 种 模板 、 程 序 样式 和 主题 束 经 常 放 在 对 
象 级 资源 里 。 这 样 一 来 ， 在 WPF 程 序 中 数据 歼 分 为 四 个 等 级 存储 了 : 
数据 库 里 的 数据 相当 于 存放 在 仓库 里 ， 资 源 文件 里 的 数据 相当 于 放 在 
旅行 箱 里 ，WPF 对 象 资 私 源 里 的 数据 相当 于 放 在 随身 携带 的 背包 里 ， 变 
量 中 的 数据 相当 于 拿 在 手 里 。 


本 章 先 来 学 习 WPF 对 象 级 资源 ， 然 后 回顾 传统 资源 在 WPF 中 的 使 用 。 
10.1 WPF 对 象 级 资源 的 定义 与 查找 
每 个 WPF 的 界面 元 素 都 具有 一 en 性 ， 这 个 属性 继承 


H FrameworkElement 类 ， 其 类 型 为 ResourceDictionary 
ResourceDictionary RÉRE DJ" 键 一 值 ” 对 的 形式 存储 从 帘 源 ， 当 需要 使 用 某 个 
资源 时 ， 使 用 “ 键 一 值 ”* 对 可 以 索引 到 资源 对 象 。 在 保存 资源 时 ， 
ResourceDictionary 视 资源 对 象 为 object 类 型 ， 所 以 在 使 用 资源 时 先 要 对 
资源 对 象 进行 类 型 转换 ，XAML 篇 泽 吕 能 够 根据 标签 的 Atvibute 自动 识 
别 资源 类 型 ， 如 果 类 型 不 对 束 会 抛 出 异 但 在 C# 代 码 里 检索 到 资源 
对 象 后 ， 类 型 转换 的 事情 就 只 能 由 我 们 5 己 来 做 了 。 


ResourceDictionary 7 可 以 存储 任意 类 型 的 对 象 。 在 XAML IEE F m] 
Resources 添 加 资源 时 需要 把 正确 的 名 称 空间 引入 到 XAML 代 码 中 。 让 
我 们 看 一 个 例子 : 


«Window x:Class-"WpfApplicationl. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xam]" 
xmlns:sysz"clr-namespace:System;assemblyzmscorlib" 

Title- "Resource" FontSize-"16"» 
«Window.Resources? 
«ResourceDictionary? 
«sys:String x:Keyz"str"» 
沉 舟 侧 畔 千帆 过 ， 病 树 前 头 万 木 春 。 
«Jsys:String» 
«sys:Double x: Keyz"dbl"53.1415926«/sys:Double» 
«fResourceDictionary 
«IWindow.Resources? 
<StackPanel> 
<TextBlock Text="{StaticResource ResourceKey=str}" Margin-"5" /> 
<l--<TextBlock Text="{StaticResource ResourceKey=dbl}" />--> 
</StackPanel> 
</Window> 


E Zo System% WE A5 A XAMLÍTCRBJERR EN sys RE, AEE 
Window.Resources 属 性 里 添加 了 两 个 资源 条 目 ， 一 个 是 string 类 型 Sc 
例 、 一 个 是 double 类 型 实例 ， 最 后 我 用 两 个 TextBlock 来 消费 这 些 资 源 

(被 注销 掉 的 代码 会 因数 据 类 型 不 匹配 而 抛 出 异常 ) 。 程 序 的 运行 效 
果 如 图 10-1 所 示 。 


8^ Resource 
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因为 在 XAML 代 码 中 可 以 对 集合 类 型 内 容 及 标签 扩展 进行 简写 ， 所 以 
上 上 面 代码 更 常见 的 书写 格式 是 这 a 


«Window x:Class-"WpfApplication]. Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys-"clr-namespace:System;assembly-mscorlib" Title-"Resource" 
FontSize-"16"» 
«Window.Resources? 

<sys:String x:Key-"str"» 

沉 丹 侧 畔 和 干 帆 过 ， 病 树 前 头 万 木 春 。 

SSyS'String> 

<sys:Double x:Key-"dbl"»3.1415926«/sys;Double» 
«Nindow.Resources? 
<StackPanel> 

<TextBlock Text="{StaticResource str]" Margin-"5" /> 
«/StackPanel» 


«Window» 


在 检索 资源 时 ， 先 查找 控件 自己 的 Resources 属 性 ， 如 果 没 有 这 个 资源 
程序 会 治 着 逻辑 树 向 上 一 级 控件 查找 ， 如 果 连 最 顶层 容器 都 没有 这 个 
资源 ， 程 序 就 会 去 查找 Application.Resources (也 就 是 程序 的 顶级 资 
源 ) ， 如 果 还 没 找到 ， 那 就 只 好 抛 出 异常 了 。 这 就 好 比 每 个 界面 元 素 
都 有 自己 的 一 个 背包 ， 里 面 可 能 装着 各 种 各 样 的 资源 ， 使 用 的 时 候 打 
开 找 一 找 ， 如 果 没 有 找到 还 可 以 去 翻 看 上 一 层 控 件 的 背包 ， 直 至 找到 
资源 或 报告 没有 这 个 资源 为 止 。 


中 使 用 定义 在 XAML 代 码 里 的 资源 ， 大 概 格式 是 这 


private void Window Loaded(object sender, RoutedEventArgs e) 


f 
1 
string text = (string)this.FindResource("str"); 


this.textBlockl.Text = text; 
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private void Window Loaded(object sender, RoutedEventArgs e) 
| 
string text = (string)this.Resources["str"; 
this.textBlockl. Text = text; 


你 可 能 会 想 : WRA 把 质 源 像 CSS 或 JavaScript 那 入 放 在 独立 的 文件 
中 ， 借用 时 成 过 引 用 、 重用 时 便于 分 发 它 不 更 好 ? WPF 的 资源 当然 能 
um ResourceDictionary 具 有 一 个 名 为 Source 的 属性 ， 只 要 把 

人 iT E TERL— USE! 举 个 例子 ， 
http://wpf.codeplex.com 中 包含 了 很 多 官方 了 半 官 方 的 WPF 资 源 ， 其 中 包 
括 WPF 工 具 包 和 一 组 非常 漂亮 的 程序 皮肤 ， 这 些 皮肤 以 资源 的 形式 放 
在 XAML 文 件 中 ， 使 用 时 仅 需 把 相应 的 XAML 文 件 添加 进项 目 并 使 用 
Source 属 性 进行 引用 ， 你 的 程序 立刻 就 变 得 光鲜 照 人 : 


«Window.Resources? 
«ResourceDictionary Sourcez"ShinyRed.xaml" /> 


</Window. Resources> 


运行 效果 如 图 10-2 所 示 。 
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图 10-2 ”运行 效果 
10.2 HRP Hai HA 


= UIT E AR E, RATE AEE A PA AR E Fd A E 6E IR 
静态 方式 和 动态 方式 。Static 和 Dynamic 两 个 词 是 我 们 的 老 朋 友 
了 ， 当 这 对 词 一 同 出 现 的 时 候 Static 指 的 是 程序 的 非 执行 状态 而 
Dynamic 指 的 是 程序 运行 状态 。 对 于 资源 的 使 用 ，Static 和 Dynamic 也 是 
这 个 意思 。 静 态 资 源 使 用 (StaticResource) 指 的 是 在 程序 载 入 内 存 时 
对 资源 的 一 次 性 使 用 ， 之 后 就 不 再 去 访问 这 个 资源 了 ; 动态 资源 使 用 
(DynamicResource) 使 用 指 的 是 在 程序 运行 过 程 中 仍然 会 去 访问 资 
源 。 显 然 ， 如 果 你 确定 某 些 资源 只 在 程序 初始 化 的 时 候 使 用 一 次 、 之 
后 不 会 再 改变 ， 就 应 该 使 用 StaticResource ， 而 程序 运行 过 程 中 还 有 可 
能 改变 的 资源 应 该 以 DynamicResource 形 式 使 用 。 拿 程序 的 主题 来 举 
例 ， 如 果 程 序 皮 肤 的 颜色 在 运行 中 始终 不 变 ， 以 StaticResource 方 式 来 
使 用 资源 就 可 以 了 ; 如 果 程 序 运 行 过 程 中 允许 用 户 更 改 程序 皮肤 的 配 
色 方 案 则 必须 以 DynamicResource 方 式 来 使 用 资源 。 


m 青 看 下 面 的 例子 。 我 在 Window 的 资源 词典 里 放置 了 两 个 TextBlock 类 型 
资源 并 分 别 以 StaticResource 和 DynamicResource 方 式 来 使 用 之 : 


«Window x:Class-"WpfApplicationl. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Static v.s. Dynamic" FontSize-"16"» 

«Window.Resources 
<TextBlock x:Key-"res1" Text=" 海 上 生 明 月 "请 
<TextBlock x:Key="res2" Text=" 海 上 生 明 月 " 启 
</Window.Resources> 
<StackPanel> 
«Button Margin-"5,5,5,0" Content="{StaticResource resl}" /> 
«Button Margin="5,5,5,0" Content-" {DynamicResource res2}" /> 
«Button Margin-"5,5,5,0" Content-"Update" Click-"Button Click" /> 
</StackPanel> 
</Window> 


P 


界面 上 的 第 三 个 按钮 负责 在 程序 运行 过 程 当中 对 资源 词典 里 的 两 个 资 
产 进 行 改变 : 


private void Button. Click(object sender, RoutedEventArgs e) 

| 
this.Resources["res1"] = new TextBlock() ( Text = "天 涯 共 此 时 "); 
this.Resources["res2"] = new TextBlock() { Text = "天 涯 共 此 时 "); 


实际 上 ， 因 为 第 一 个 按钮 是 以 静态 方式 使 用 资源 ， 所 以 尽管 资源 已 经 
被 更 新 它 也 不 会 知道 。 运 行程 序 、 单 击 第 三 个 按钮 ， 效 果 如 图 10-3 所 
ZR œ 


E” Static v.s. Dynamic Ee 8 ^ Static v.s. Dynamic 


海上 生 明 月 | | 海上 生 明 月 | 


| 海上 生 明 月 | 天 涯 共 此 时 | 


图 10-3 ”运行 效果 
10.3 ”向 程序 添加 二 进 制 资源 


对 于 资源 这 个 概念 ， 很 多 WPEF 的 初学 者 会 感到 迷惑 ， 因 为 早 在 WPE 出 
现 之 前 Windows 应 用 程序 就 已 经 能 够 携 融 资源 了 。Windows 应 用 程序 资 
源 的 道理 与 WinZip 或 WinRAR 压 缩 包 的 道理 差不多 ， 实 际 上 是 把 一 些 应 
用 程序 必须 使 用 的 资源 与 应 用 程序 自身 打包 在 一 起 ， 这 样 资源 就 不 会 
意外 丢失 了 〈 负 作用 就 是 应 用 程序 体积 会 变 大 ) 。 常 见 的 应 用 程序 资 
源 有 图 标 、 图 片 、 文 本 、 音 频 、 视 频 等 ， 各 种 编程 语言 的 编译 辟 或 资 
源 编译 如 都 有 能 力 把 这 些 文件 编译 进 目 标 文件 (最 终 的 .exe 或 .dl 文 
件 ) ， 资 源 文件 在 目标 文件 里 以 二 进 制 数 据 的 形式 存在 、 形 成 目标 文 
件 的 资源 段 (Resource Section) ， 使 用 时 数据 会 被 提取 出 来 。 (请 参 


考 http://msdn.microsoft.com/en-us/magazine/ cc301808.aspx) 


为 了 不 把 资源 词典 里 的 资源 和 应 用 程序 内 藤 的 资源 搞 混 ， 我 们 明确 地 
称呼 资源 词典 里 的 资源 为 “WPF 资 源 ” 或 “对 象 资源 "”， 称 呼应 用 程序 的 内 
磐 资源 为 “程序 集资 源 ” 或 “二进制 资源 ”。 特 别提 醒 一 点 ，WPEF 程 序 中 写 
在 <Application.Resources>...</ApplicationResources> 标 签 内 的 资源 仍然 
是 WPF 资 源 而 非 二 进 制 资源 。 


下 面 让 我 们 看 看 如 何 向 WPF 程 序 添加 二 进 制 资源 并 使 用 他 们 。 


如 果 要 添加 的 资源 是 字符 串 而 非 文 件 ， 我 们 可 以 使 用 应 用 程序 
Properties 名 称 空间 中 的 Resources.resx 资 源 文 件 。 打 开 资 源 文件 的 方法 
是 在 项 目 管理 器 中 展开 Properties 结 点 并 双击 Resources.resx， 如 图 10-4 
所 示 。 
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图 10-4 JE REUS 


Resourcesresx 文 件 内 容 的 组 织 形式 也 是 “ 键 一 值 ? 对 ， 编 译 后 ， 
Resources.resx 2: JÉ ^J Properties 45 称 空 间 中 的 Resources 类 ， 使 用 这 个 类 
的 方法 或 属性 就 能 获取 资源 。 为 了 让 XAML 编 译 器 能 够 访问 这 个 类 ， 
一 定 要 把 Resources.resx 的 访问 级 别 由 Internal 改 为 Public。 利 用 资源 文件 
编辑 器 ， 可 在 资源 文件 的 字符 串 组 里 添加 两 个 条 目 ， 然 后 分 别 在 
XAML 和 C# 代 码 中 访问 它们 。 


在 XAML 代 码 中 使 用 Resources.resx 中 的 资源 ， 先 要 把 程序 的 Properties 


~ 空间 映射 为 XAML 名 称 空间 ， 然 后 使 用 x:Static 标 签 扩 展 来 访问 资 
源 


«Window x:Class-"WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:propz"clr-namespace: WpfA pplication1 Properties" 
Title-"Binary Resource"? 

«Grid Margin="$"> 
«Grid.ColumnDefinitions 
«ColumnDefinition Width-" Auto" /> 
«ColumnDefinition Width-"4" /> 
«ColumnDefinition Width-"*" /> 
«fGrid.ColumnDefinitions? 
«Orid. RowDefinitions? 
<RowDefinition Height-"23" /» 
<RowDefinition Height-"4" /> 
<RowDefinition Height-"23" /> 
</Grid.RowDefinitions> 
<TextBlock Text="{x:Static prop:Resources,UserName}" > 
<TextBlock x:Name="textBlockPassword" Grid,Row="2" /> 
<TextBox BorderBrush-"Black" Grid.Column="2" /> 
<TextBox BorderBrush="Black" Grid.Column="2" Grid,Row="2" /> 
</Grid> 
«Window» 


C# 代 码 中 访问 Resources.resx 中 的 资源 与 使 用 一 般 别 无 二 致 : 


public Window10) 
| 


InitializeComponent(); 
this.textBlockPassword. Text = Properties, Resources, Password; 


} 
运行 效果 如 图 10-5 所 示 。 


图 10-5 “运行 效果 


使 用 Resources.resx 最 大 的 好 处 就 是 便于 程序 的 国际 化 、 本 地 化 。 如 果 
我 想 把 界面 改 为 英文 版 ， 只 需要 把 资源 的 值 改 为 相应 的 英文 即 可 ， 如 
。 因 为 我 在 程序 中 访问 资源 使 用 的 是 资源 的 名 ， 所 以 代码 无 
需 改 动 。 


mr 
Name ^ Value 8 ' Binary Resource FII 


UserName Name 


图 10-6 ”使 用 Resources.resx 的 好 处 


如 果 需 要 添加 的 资源 不 是 字符 串 而 是 图 标 、 图 片 、 音 频 或 视频 ， 方 法 
就 不 是 使 用 Resources.resx 了，WPF 不 支持 这 样 做 。 在 WPF 中 使 用 外 部 
文件 作为 资源 ， 仅 需 简 单 地 将 其 加 入 项 目 即 可 。 方 法 是 在 项 目 管理 器 
中 右 击 项 目 名 称 ， 在 弹出 菜单 里 选择 Add -> New Folder， 按 需要 新 建 几 
层 文 件 夹 来 组 织 资 源 ， 然 后 在 恰当 的 文件 夹 上 右 击 ， 在 弹出 末 单 里 选 
择 Add 一 Existing Item...， 在 文件 对 话 框 里 选择 文件 后 单 击 Add 按 钮 ， 文 
件 就 以 资源 形式 加 入 到 项 目 中 了 。 


如 果 在 程序 中 添加 了 一 个 mp3 文 件 和 一 张 图 片 ， 如 图 10-7 所 示 ， 结 有 果 文 
件 的 体积 就 会 膨胀 好 几 兆 : 
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图 10-7 在 程序 中 添加 一 个 mp3 和 一 张 图 片 


注意 


1045 KB 
32 KB 
14 KB 


有 一 点 特别 提醒 大 家 注意 ， 那 就 是 如 果 想 让 外 部 文件 编译 进 目标 成 为 二 进 制 资源 ， 必 须 在 属性 


窗口 中 把 文件 的 Build Action 属 性 值 设 为 Resource (如 图 10-8 所 示 ) 


设 为 Resource， 比 如 图 片 文件 会 ，mp3 文 件 就 不 会 。 一 般 情 况 下 如 上 


。 并 不 是 每 种 文件 都 会 


自动 


BuildAction 属 性 被 设 为 


Resource， 则 Copy to Output Directory & Eix Do not copy; 如 果 不 希 望 以 资源 的 形式 使 用 外 
部 文件 ， 可 以 把 BuildAction 设 为 None， 而 把 Copy to Output Directory 设 为 Copy always。 另 外 ， 
BuildAction 属 性 的 下 拉 列 表 里 有 一 个 颇具 迷惑 性 的 值 Embedded Resource， 不 要 选择 这 个 值 。 


Properties 


Rafale.jpg File Properties 


. I > 
$s- Dz- 
加 =- a z=- 区 


Build Action Resource Build Action Resource 


Copy to Output Directory Do not copy Copy to Output Directory Do not copy 
Custom Tool Custom Tool 

Custom Tool Namespace Custom Tool Namespace 

File Name Background.mp3 File Name Rafale.jpg 


Full Path C\Users\Adminis Full Path C\Users\Administ 


Build Action ! Build Action 
How the file relates to the build and How the file relates to the build and 
deployment processes. deployment processes. 


图 10-8 ”设置 文件 的 BuildAction 属 性 
10.4 ”使 用 Pack URI 路 径 访问 二 进 制 资 源 


E 二 进 制 资源 已 经 被 添加 进 我 们 的 程序 ， 怎 样 才 能 访问 到 它们 
[e^ 


WPF 对 二 进 制 资源 的 访问 有 自己 的 一 套 方法 ， 称 为 Pack URI 路 径 。 有 


时 候 死 记 硬 背 既 能 帮助 读者 快速 学 习 又 能 帮助 作者 偷 点 小 懒 ， 比 如 
WPF 的 Pack URI 路 径 ， 你 只 需要 记 住 这 样 的 格式 即 可 : 


pack://application,,[/ 程 序 集 名 称 ;][ 可 选 版 本 号 ;][ 文 件 夹 名 称 /] 文 件 名 称 


而 实际 上 因为 pack:/Wapplication,,, 可 以 省 略 、 程 序 集 名 称 和 版 本 号 党 使 
用 缺 省 值 ， 所 以 剩 下 的 束 只 有 这 个 了 : 


[文件 夹 名 称 /] 文 件 名 称 


前 面 例子 中 我 们 同 资源 中 添加 了 一 张 名 为 Rafale.jpg 的 图 片 ， 它 在 项 目 
里 的 路 径 是 Resources/Images/Rafale.jpg， 原 封 不 动 使 用 这 个 路 径 就 可 以 


访问 此 图 片 了 。 我 们 用 这 个 图 片 填充 一 个 <Image/> 元 素 并 把 <Image/> 元 
素 作 为 窗 体 的 背景 : 


«Window x:Class-"WpfApplicationl. Window]" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-"Binary Resource" 
«Grid» 

«]mage x: Name-"ImageBg" Sourcez "Resources/Images/Rafale.jpg" Stretch-"Fill" /> 
<iGrid> 


</Window> 


或 : 


«Window x:Class-"WpfApplication]. Window] " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Binary Resource" 

«Gnd» 
«Image x:Name-"ImageBg" 
Sourcez"pack://application:, /Resources/Images/Rafale.jpg" 
Stretch-"Fill" /> 
</Grid> 
</Window> 


与 之 等 价 的 C# 代 码 如 下 : 


public Window1() 
i 


InitializeComponent(); 


Uri imgUri = new Uri(@"Resources/Images/Rafale.jpg", UriKind.Relative); 
this.ImageBg.Source = new Bitmaplmage(imgUri); 


或 : 
public Window! () 
i 
InitializeComponent(); 
Uri imgUri = new Uri((à"pack://application:,,./Resources/Images/Rafale.jpg", UriKind. Absolute); 
this.ImageBg.Source = new Bitmaplmage(imgUri); 


运行 效果 如 图 10-9 所 示 。 


E` Binary Resource 
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图 10-9 ”运行 效果 
注意 
在 使 用 Pack URI 路 径 时 有 几 点 需要 注意 : 


e Pack URI 使 用 从 右 向 左 的 正 斜 线 (/) 表示 路 径 。 


0 a 
以 省 略 。 
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完整 写法 时 是 绝对 路 径 ，C# 代 码 中 的 UriKind 必 须 为 Absolute 并 有 


l 


进 和 


导航 ， 比 如 ./ 代 表 同 级 目 


代表 根 目录 的 /不 能 省 


录 、../ 代 表 父 级 目 


11 
深入 浅 出 话 模板 


图 形 用 户 界 面 应 用 程序 较 之 控制 台 界 面 应 用 程序 最 大 的 好 人 处 就 是 界面 
友好 、 数 据 显 示 直 观 。CUI 程 序 中 数据 只 能 以 文本 的 形式 线性 显示 ， 
GUI 程序 则 允许 数据 以 文本 、 列 表 、 图 形 等 多 种 形式 立体 显示 。 


用 户 体验 在 GUI 程序 设计 中 起 着 举足轻重 的 作用 一 一 用 户 界 面 设 计 成 什 
么 样子 看 上 去 才 够 漂亮 ? 控件 如 何 安排 才 人 简单 易 用 并 且 少 犯错 误 ? 这 
些 都 是 设计 师 需 要 考虑 的 问题 。WPF 系 统 不 但 文 持 传统 Windows Forms 
编程 的 用 户 界 面 和 用 户 体 验 设 计 ， 更 文 持 使 用 专门 设计 工具 Microsoft 
Blend 进 行 专业 设计 ， 同 时 还 推出 了 以 模板 为 核心 的 新 一 代 
设计 理念 。 


本 章 我 们 就 一 同 来 领略 WPE 强 大 的 模板 功能 的 风采 。 
11.1 ESREJPTR 


AEn EG. Rime RAER”, US TES, gun] AK 
照 它 制造 很 多 一 样 的 实例 。 我 们 党 把 看 起 来 一 样 的 东西 称 为 “一 个 模子 
T e JATT, WPEP RIAIN I EAA YR 
Aj o 


Binding 和 基于 Binding 的 数据 驱动 界面 是 WPF 的 核心 部 分 ，WPF 最 精彩 
的 部 分 是 什么 呢 ? 依 我 看 ， 既 不 是 美 轮 美 钢 的 3D 图 形 ， 也 不 是 炫丽 夺 
目的 动画 ， 而 是 有 些 默默 无 闻 的 模板 (Template) 。 实 际 上 ， 就 连 
2D/3D 绘 图 和 动画 也 和音 常 是 为 它 饥 上 添 伦 。 


Template 袍 竟 具 有 什么 能 力 使 得 它 在 WPF 体 系 中 获 此 殊 采 昵 ? 这 还 要 从 
哲学 谈 起 ,“ 形 而 上 者 谓 之 道 ， 形 而 下 者 谓 之 郁 ?”， 这 人 句 话 出 目 《 易 
经 》， 大 意 是 说 在 我 们 能 够 观察 到 的 世间 万 物 的 形象 之 上 抽象 的 结 
谍 古 思维 ， 而 形象 之 下 掩盖 的 则 是 其 本 质 。 显 然 ， 古人 已 经 注意 
到 “ 形 * 是 连接 本 质 与 思维 的 枢纽 ， 让 我 们 把 这 人 句 话 引 入 计算 机 世界 。 


e “ 形 而 上 者 谓 之 道 ? 指 的 就 是 基于 现实 世界 对 万 物 进行 抽象 封装 、 理 
顺 它 们 之 间 的 关系 ， 这 个 “ 道 ” 不 就 是 面向 对 象 思 想 吗 ! 如 果 把 面向 对 
象 思 想 进一步 提升 、 总 结 出 对 象 之 间 的 最 优 组 合 关系 , MEHA 
设计 模式 思想 。 


e “ 形 而 下 者 谓 之 器 ? 指 的 是 我 们 能 观察 到 的 世间 万 物 都 是 物质 本 质 内 
E “本 质 与 表现 ?或 者 说 “内 容 与 形式 "是 哲学 范畴 内 的 一 对 


软件 开发 之 “ 道 ” 并 非 本 书 人 研究 的 主要 内 容 ， 本 书 人 研究 的 是 WPF ° WPF 
的 全 称 是 Windows Presentation Foundation，Presentation 一 词 的 意思 就 是 
外 观 、 呈 现 、 表 现 ， 也 就 是 说 ， 在 Windows GUI 程 序 这 个 尺度 上 ，WPF 
扮演 的 就 是 “ 形 ” 的 角色 、 是 程序 的 外 在 “形式 ”， 而 程序 的 “内 容 ” 仍 然 是 
由 数据 和 算法 构成 的 业务 逻辑 。 与 WPF 类 似 ，Windows Forms 和 
ASPNET 都 是 程序 内 容 的 表现 形式 ， 如 图 11-1 所 示 。 


ASP.NET 


图 11-1 WPFS5 Windows Forms 和 ASPNET 的 关系 


让 我 们 把 尺度 缩小 到 WPF 系 统 内 部 。 这 个 系统 与 程序 内 容 (业务 逻 
辑 ) 的 边界 是 Binding，Binding 把 数据 源源 不 断 地 从 程序 内 部 送出 来 、 
交 由 界面 元 素来 显示 ， 又 把 从 界面 元 素 收 集 来 的 数据 传送 回程 序 内 
部 。 界 面 元 素 间 的 沟通 则 依靠 路 由 事件 来 完成 ， 有 时 候 路 由 事件 和 附 
加 事件 也 会 参与 到 数据 的 传输 中 。 让 我 们 思考 一 个 问题 : WPF 作 为 
Windows 程 序 的 表示 方式 ， 它 究竟 在 表示 什么 ? 换 名 话说，WPF 作 为 一 
种 “形式 ”， 它 要 表现 的 内容” 究竟 是 什么 ? 答案 是 : 程序 的 数据 和 算法 


Binding 传 递 的 是 数据 ， 事 件 参数 携 市 的 也 是 数据 ; 方法 和 委托 的 
调用 是 算法 ， 事 件 传递 消息 也 是 算法 .……. 数 据 在 内 存 里 就 是 一 串 串 数 
字 或 字符 ， 算 法 是 一 组 组 看 不 见 摸 不 着 的 抽象 逻辑 ， 如 何 恰如其分 地 
把 它们 展现 给 用 户 呢 ? 


假如 想 表 达 一 个 bool 类 型 数据 ， 同 时 还 想 表 达 用 户 可 以 在 这 两 个 值 之 间 
目 由 切换 这 样 一 个 算法 ， 你 会 怎么 做 ? 你 一 定 会 想到 使 用 一 个 
CheckBox 控 件 来 满足 要 求 ， 再 比如 颜色 值 实际 上 是 一 串 数 字 ， 而 用 户 
基本 上 不 可 能 只 看 这 串 数字 就 能 想象 出 真正 的 颜色 ， 而 且 用 户 也 不 希 
望 只 能 靠 输入 字符 来 设置 凑 色 值 ， 这 时 ， 颜 色 值 这 一 “数据 内 容 ” 的 恰 
当 表 现形 式 就 是 一 个 填充 着 真实 颜色 的 色 块 ， 而 用 户 既 可 以 输入 值 又 
可 以 用 取 色 管 取 色 来 设置 颜色 值 的 “算法 内 容 ” 恰 当 的 表达 方式 是 创建 
一 个 ColorPicker 控 件 。 相 信 你 已 经 发 现 ， 控 件 (Control) 是 数据 内 容 
表现 形式 和 算法 内 容 表 现形 式 的 双重 载体 。 换 句 话 说， 控件 既是 数据 
的 表现 形式 让 用 户 可 以 直观 地 看 到 数据 ， 又 是 算法 的 表现 形式 让 用 户 
方便 地 操作 逻辑 。 


作为 “表现 形式 *"， 每 个 控件 部 十 为 了 实现 某 种 用 户 操 作 算 法 和 直观 显 
示 某 种 数据 而 生 ， 一 个 控件 看 上 去 是 什么 样子 由 它 的 “算法 内 容 * 和 “ 效 
据 内 容 ” 决 是 ， 这 殊 是 内 容 决 定形 式 。 这 里 ， 我 们 引入 两 个 概念 : 


e 控件 的 “算法 内 容 ”: 指控 件 能 展示 哪些 数据 、 具 有 哪些 方法 、 能 员 
应 哪些 操作 、 能 激发 什么 事件 ， 简 而 言 之 区 是 控件 的 功能 ， 它 们 是 一 
组 相关 的 算法 逻辑 。 


e 控件 的 “数据 内 容 *， 控件 所 展示 的 具体 数据 是 什么 。 


以 往 的 GUI 开 发 技术 (如 Windows FormsflASE.NET) 中 ， 控 件 内 部 的 
逻辑 和 数据 是 固定 的 ， 程 序 员 不 能 改变 ， 对 于 控件 的 外 观 ， 程 序 员 能 
做 的 改变 也 非常 有 限 ， 一 般 也 就 是 设置 控件 的 属性 ， 想 改变 控件 的 内 
部 结构 是 不 可 能 的 。 如 果 想 扩展 一 个 控件 的 功能 或 者 更 改 其 外 观 让 其 
更 适应 业务 逻辑 ， 哪 怕 只 有 一 丁点 改变 ， 也 经 常 需要 创建 控件 的 子 类 
或 者 创建 用 户 控件 (UserControl) 。 造 成 这 个 局 面 的 根本 原因 就 是 类 
据 和 算法 的 “形式 ”与 “内 容 * 奸 合 的 太 紧 了 。 


在 WPF 中， 通过 引入 模板 (Template) 微软 将 数据 和 算法 的 “内 
容 " 与 “形式 ” 解 耦 了 。WPF 中 的 Template 分 为 两 大 类 : 


e ControlTemplate 是 算法 内 容 的 表现 形式 ， 一 个 控件 怎样 组 织 其 内 部 
结构 才能 让 它 更 符合 业务 逻辑 、 让 用 户 操 作 起 来 更 舒服 就 是 由 它 来 挥 
制 的 。 它 决定 了 控件 “长 成 什么 样子 ”"， 并 让 程序 员 有 机 会 在 控件 原 有 
的 内 部 逻辑 基础 上 扩展 自己 的 逻辑 。 


e DataTemplate 是 数据 内 容 的 表现 形式 ， 一 条 数据 显示 成 什么 样子 ， 
征 简 单 的 文本 还 是 直观 的 独 形 动画 吏 由 它 来 决定 。 


一 言 蔽 之 ，Template 就 是 “外 衣 ” 
DataTemplate 是 数据 的 外 衣 。 


下 面 让 我 们 砍 划 两 个 例子 。 


WPF 中 的 控件 不 再 具有 固定 的 形象 ， 仅 仅 是 算法 内 容 或 数据 内 容 的 载 
体 。 你 可 以 把 控件 理解 为 一 组 操作 逻辑 穿 上 了 一 套 衣 服 ， 换 套 衣 服 它 
就 能 变 成 另外 一 个 模样 。 你 看 到 的 控件 默认 形象 实际 上 就 是 出 三 时 微 
软 为 它 穿 上 的 默认 服装 。 看 到 下 面 图 中 的 温度 计 ， 你 是 不 是 习惯 性 地 
猜想 这 是 一 个 由 若干 控件 和 图 形 拼 梁 起 来 的 UserControl 呢 ?实际 此 
是 一 个 ProgressBar 控 件 ， 只 是 我 们 的 设计 师 为 它 设计 了 一 套 新 衣服 
一 一 这 套 衣 服 改变 了 一 些 颜色 、 添 加 了 一 些 装 饰品 和 刻度 线 并 移 除 了 
脉搏 动画 ， 如 图 11-2 所 示 。 


ControlTemplate 是 控件 的 外 衣 ， 


MaxValue 
4100 


MinValue 


Show From 


Medium Span 


cr - 
| Initialize 


Value 


图 11-2 ”ProgressBar 控 件 制作 的 温度 计 


WPF 中 的 数据 显示 成 什么 样子 也 可 以 自由 设 定 。 比 如 下 面 这 张 图 中 ， 

只 是 为 数据 条 目 准 备 了 一 个 DataTemplate ， 在 这 个 DataTemplate 中 用 
Binding 把 一 个 TextBlock 的 Text 属 性 关联 到 数据 对 象 的 Year 属 性 上 、 把 
一 个 Rectangle 的 Width 属 性 和 男 一 个 TextBlock 的 Text 属 性 都 关联 在 数据 
对 象 的 Price 属 性 上 ， 并 使 用 StackPanel 和 Grid 对 这 几 个 控件 布局 。 一 旦 
应 用 这 个 DataTemplate， 单 调 的 数据 就 变 成 了 直观 的 柱状 图 ， 如 图 11-3 


所 示 。 以 往 这 项 工作 不 但 需要 先 创 建 用 于 显示 数据 的 UserControl， 还 
要 为 UserControl 添 加 显示 / 回 写 数据 的 代码 。 


B` DataTemplate 


图 11-3 ”DataTemplate 示 例 


如 有 果 别 的 项 目 组 也 喜欢 这 个 柱状 图 ， 你 要 做 的 事情 只 是 把 DataTemplate 
的 XAML 代 码 发 给 他 们 。 它 的 代码 如 下 : 


<DataTemplate> 
<Grid> 
<StackPanel Orientation="Horizontal"> 
«Grid» 
«Rectangle Stroke-"Yellow" Fill-"Orange" Width-" [Binding Pricej" /> 
«TextBlock Text-" [Binding Year]" /> 
</Grid> 
<TextBlock Text=" {Binding Price}" Margin-"5,0" /> 
</StackPanel> 
«IGrid» 
«/DataTemplate» 


我 想 ， 尽 管 你 还 没有 学 习 什 么 是 DataTemplate， 但 借 着 前 面 学 习 的 基础 
也 一 样 能 看 个 八 九 不 离 十。 


11.2 ”数据 的 外 衣 DataTemplate 


“ 横 看 成 岭 侧 成 峰 ， 远 近 高 低 各 不 同 ”>， 庐 山 美 景 如 此 ， 数 据 又 何 答 不 
是 这 样 呢 ? 同样 一 条 数据 ， 比 如 具有 Id、Name、PhoneNumber、 
Address 等 属性 的 Student 实 例 ， 放 在 GridView 里 有 时 可 能 就 是 简单 的 文 
本 、 每 个 单元 格 只 显示 一 个 属性 ; 放 在 ListBox 里 有 时 为 了 避免 单调 可 
以 在 最 左 端 显示 64*64 的 头像 ， 再 将 其 他 属性 分 两 行 排列 在 后 面 ; 如果 
是 单独 显示 一 个 学 生 的 信息 则 可 以 用 类 似 人 简历 的 复杂 格式 来 展现 学 生 
的 全 部 数据 。 一 样 的 内 容 可 以 用 不 同 的 形式 来 展现 ， 软 件 设 计 称 之 
为 “数据 -视图 ” (Data-View) 模式 。 以 往 的 开发 技术 ， 如 MFC、 
Windows Forms、ASPNET 等 ， 视 图 要 靠 UserControl 来 实现 ，WPEF 不 但 
支持 UserControl 还 支持 用 DataTemplate 为 数据 形成 视图 。 别 以 为 
DataTemplate 有 多 难 哦 ! 从 UserControl 升 级 到 DataTemplate 一 般 就 是 复 
制 、 烙 贴 一 下 再 改 几 个 字符 的 事 儿 e 


DataTemplate 和 党 用 的 地 方 有 3 处 ， 分 别 是 : 


e ContentControl 的 ContentTemplate 必 性， 相当 于 给 ContentControl 的 
内 容 穿 衣 服 。 


e ItemsControl 的 ItemTemplate 属 性 ， 相 当 于 给 ItemsControl 的 数据 条 卓 
FKR ° 


e GridViewColumn 的 CellTemplate 必 性， 相当 于 给 GridViewColumn 单 
元 格 里 的 数据 罕 衣 服 。 


让 我 们 用 一 个 例子 对 比 UserControl 与 DataTemplate 的 使 用 。 例 子 实现 的 
需求 是 这 样 的 ， 有 一 列 汽车 的 数据 ， 这 列 数据 显示 在 一 个 ListBox 里 ， 
要 求 ListBox 的 条 目 显 示 汽 车 的 厂商 图 标 和 简要 参数 ， 单 击 某 个 条 有 目 后 
在 窗 体 的 详细 内 容 区 域 显 示 汽 车 的 照片 和 详细 参数 。 


无 论 是 使 用 UserControl 还 是 DataTemplate， 广 商 的 Logo 和 汽车 的 照片 都 
是 要 用 到 的 ， 所 以 先 在 项 目 中 建立 资源 管理 目录 并 把 图 片 添加 进来 。 
Logo 的 文件 名 与 三 商 名 称 一 人 怪 ， 照 片 的 文件 名 则 与 车 名 一 人 至。 组 织 结 
构 如 图 11-4 所 示 。 


Solution Explorer - Solution 'WpfApplicatio... 


[ax] Solution 'WpfApplication1' (1 project) ^ 
S- 国 WpfApplication1 
由 … E Properties 
由 . sj References 
c [By Resources 


日 - £y Images 
B L. id] Diablo.jpg 
— [gi] Gallardo.jpg 
— [gi] Murcielago.jpg 
— igi] Reventon.jpg 
日 - B Logos 
| ~ [gi] Lamborghini.png 
a- fe Appxaml 


图 11-4 ”资源 管理 目录 的 组 织 结构 图 


首先 创建 Car 数 据 类 型 : 


public class Car 

| 
public string Automaker | get; set; } 
public string Name { get; set; } 
public string Year | get; set; } 
public string TopSpeed { get; set; } 


为 了 在 ListBox 里 显示 Car 类 型 数据 ， 我 们 需要 准备 一 个 UserControl， 命 
名 为 CarListItemView。 这 个 UserControl 由 一 个 Car 类 型 实例 在 背后 文 
持 ， 当 设置 这 个 实例 的 时 候 ， 界 面 元 素 将 实例 的 属性 值 显示 在 各 个 欣 
件 里 。CarListItemView 的 XAML 部 分 代码 如 下 : 


«UserControl x:Class-"WpfApplication] .CarListltemView" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml"» 

«Grid Margin-"2"» 
«StackPanel Orientation-"Horizontal"» 
«]mage x:Name-"imageLogo" Grid. RowSpan-"3" Width-"64" Height-"64" /> 
«StackPanel Margin-"5,10"» 
<TextBlock x:Name-"textBlockName" FontSize-" 16" FontWeight-"Bold" /> 
<TextBlock x:Name-"textBlock Year" FontSize-"]4" /> 
«/StackPanel» 
</StackPanel> 
</Grid> 
</UserControl> 


CarListItemView 用 于 支持 前 台 显 示 的 属性 C# 代 码 如 下 : 


private Car car; 
public Car Car 
i 
get { return car; } 
set 
i 
car = value; 
this.textBlockName. Text = car.Name; 
this.textBlock Year. Text = car. Year; 
string uriStr = string.Format(@"/Resources/Logos/{0}.png", car.Automaker); 
this.imageLogo. Source = new BitmapImage(new Uri(uriStr, UriKind.Relative)); 
} 


类 似 的 原理 ， 我 们 需要 为 Car 类 型 数据 准备 一 个 详细 信息 的 视图 。 
UserControl 名 称 为 CarDetailView，XAML 部 分 代码 如 下 : 


«UserControl x:Class-"WpfApplication] .CarDetail View" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml"» 

«Border BorderBrush-"Black" BorderThickness-"]" ComerRadius-"6"» 
«StackPanel Margin-"5"» 
«|mage x:Name-"imagePhoto" Width-"400" Height-"250" /> 
«StackPanel Orientation-" Horizontal" Margin-"5,0"» 
<TextBlock Text-"Name:" FontWeight-"Bold" FontSize-"20" /> 
<TextBlock x:Name-"textBlockName" FontSize-"20" Margin-"5,0" /» 
«/StackPanel» 
«StackPanel Orientation-" Horizontal" Margin-"5,0"» 
<TextBlock Text-" Automaker;" FontWeight-"Bold" > 
<TextBlock x:Name-"textBlockAutomaker" Margin-"5,0" /> 
«TextBlock Text="Year:" FontWeight-"Bold" /> 
<TextBlock x:Name-"textBlock Year" Margin-"5,0" /> 
<TextBlock Text-"Top Speed:" FontWeight-"Bold" /> 
<TextBlock x:Name7"textBlockTopSpeed" Margin-"5,0" /> 
«/StackPanel» 
</StackPanel> 
</Border> 
</UserControl> 


后 台 文 持 数 据 大 同 小 异 : 


private Car car; 
public Car Car 
i 
get { return car; } 
set 
| 
car value; 
this.textBlockName.Text = car.Name; 
this.textBlock Year. Text = car. Year; 
this.textBlockTopSpeed.Text = car. TopSpeed; 
this.textBlockAutomaker.Text = car.Automaker; 
string uriStr = string.Format((a" /Resources/Images/ 0] jpg", car.Namo); 
this.imagePhoto.Source = new Bitmaplmage(new Uri(uriStr, UriKind.Relative)); 


最 后 把 它们 组 装 到 主 窗 体 上 : 


«Window x:Class-"WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-"clr-namespace: WpfApplication]" 

Height-"350" Width-"623" Title-"UserControl"» 
«StackPanel Orientation-"Horizontal" Margin-"5"» 
«]ocal:CarDetailView x:Name-"detailView" /> 
«ListBox x:Name-"listBoxCars" Width-" 180" Margin" 5,0" 
SelectionChanged-"listBoxCars. SelectionChanged" /> 
«/StackPanel» 
«Window» 


窗 体 的 后 合 代码 如 下 : 


public partial class Window] : Window 
i 
/| 构造 器 
public Windowl() 
{ 
InitializeComponent(); 
InitialCarList(); 


Ji 初始 化 ListBox 
private void InitialCarList() 


1 


List<Car> carList = new List<Car>() 

i 
new Car(){ Automaker-"Lamborghini", Name="Diablo", Year="1990", TopSpeed="340"}, 
new Car() | Automaker="Lamborghini", Name="Murcielago", Year-"2001", ^ TopSpeed-"353"|, 
new Car(){ Automaker-"Lamborghini", Name-"Gallardo", Year-"2003", ^ TopSpeed-"325"], 
new Car() | Automaker-"Lamborghini", Name-"Reventon", Year-"2008", ^ TopSpeed-"356"], 


foreach (Car car in carList) 


i 


CarListItemView view = new CarListItemView(); 
view.Car = car; 
this.listBoxCars.Items.Add(view); 


/选项 变化 事件 的 处 理 器 


private void listBoxCars_ SelectionChanged(object sender, SelectionChangedEventArgs e) 


{ 


CarListItemView view = e.AddedItems[0] as CarListItemView; 
if (view != null) 
{ 


this.detailView.Car = view.Car; 


运行 程序 并 单 击 ListBox 里 的 条 目 ， 效 果 如 图 11-5 所 示 。 


E` UserControl 


Diablo 
1990 


Murcielago 
2001 


Gallardo 
| 2003 
Reventon 
2008 
Name: Reventon | 


Automaker: Lamborghini Year: 2008 Top Speed: 356 


图 11-5 “运行 效果 


很 难说 这 样 做 是 错 的 ， 但 在 WPF 里 如 此 实现 需求 真是 浪费 了 数据 驱动 
界面 这 一 重要 功能 。 我 们 和 常 说 的 “把 WPF 当 作 Windows Forms 来 用 ” 指 的 
就 是 这 种 实现 方法 。 这 种 方法 对 WPF 最 大 的 曲解 在 于 没有 借助 Binding 
实现 数据 有 驱动 界面 ， 并且 认为 ListBox.Items 属 性 里 放置 的 是 控件 iX 
种 曲解 迫使 数据 在 界面 元 素 间 交换 并 且 程 序 员 只 能 使 用 事件 驱动 方式 
来 实现 逻辑 一 一 程序 员 必 须 借助 处 理 ListBox 的 SelectionChanged 事 件 来 
推动 CarDetailView 来 显示 数据 ， 而 数据 又 是 由 CarListItemView 探 件 转 
区 给 CarDetailView 探 件 的 ， 之 间 还 做 了 一 次 类 型 转换 。 图 11-6 用 于 说 明 
目前 的 事件 驱动 模式 与 期 望 中 数据 驱动 界面 模式 的 不 同 : 


dt 


ien S [nee] | Tm 控件 
[| 
数据 | * sa)? 
| 
事件 驱动 数据 驱动 


图 11-6 事件 驱动 模式 与 数据 驱动 模式 的 区 


显然 ， 事件 驱动 是 控件 和 控件 之 间 沟 通 或 者 说 是 形式 与 形式 之 间 的 沟 
通 ， 数 据 张 动 则 是 数据 与 控件 之 间 的 沟通 、 是 内 容 决 定形 式 。 使 用 
DataTemplate 束 可 以 很 方便 地 把 事件 驱动 模式 升级 为 数据 驱动 模式 。 


你 是 不 是 在 担心 前 面 写 的 代码 会 被 删 掉 呢 ? 不 会 的 ! 由 UserControl 升 
级 为 DataTemplateH 时 902% 的 代码 可 以 原样 找 贝 ， 男 10% 可 以 放心 删除 ， 
再 做 一 点 点 改动 就 可 以 了 。 让 我 们 开始 吧 ! 


首先 把 两 个 UserControl 的 “* 芯 ”前 切 出 来 ， 用 <DataTemplate> 标 签 包 装 ， 
再 放 进 主 窗 体 的 资源 词典 里 。 最 重要 的 一 点 是 为 DataTemplate 里 的 每 个 
控件 设置 Binding， 告 诉 各 个 控件 应 该 关注 数据 的 哪个 属性 。 因 为 使 用 
Binding 在 控件 与 数据 间 建 立 关联 ， 免 去 了 在 C# 代 码 中 访问 界面 元 素 ， 
所 以 XAML 代 码 中 的 大 多 数 x:Name 都 可 以 去 掉 ， 代 码 看 上 去 地 简洁 不 


少 。 
有 些 属性 的 值 不 能 直接 拿 来 用 ， 比 如 汽车 的 厂商 和 名 称 不 能 直接 拿 来 


作为 图 片 的 上 路径， 这 时 就 要 使 用 Converter。 有 两 种 办 法 可 以 在 XAML 
代码 中 使 用 Converter: 


o 把 Converter 以 资源 的 形式 放 在 资源 词典 里 (本 例 使 用 的 方法 ) 。 


e 为 Converter 准 备 一 个 静态 属性 ， 形 成 单 件 模式 ， 在 XAML 代 码 里 使 
用 {x:Static} 标 签 扩展 来 访问 。 


Mn 


我 们 的 两 个 Converter 代 码 如 下 : 


儿 厂 商 名 称 转换 为 Logo 图 片 路 径 


public class AutomakerToLogoPathConverter : IValueConverter 


| 


l Ett 
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
1 

string uriStr = string.Format((a" /Resources/Logos/ 10] png", (string)value); 

retum new BitmapImage(new Uri(uriStr, UriKind.Relative)); 


儿 未 被 用 到 
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
{ 


throw new NotImplementedException(); 


I| 汽车 名 称 转换 为 照片 路 径 
public class NameToPhotoPathConverter : IValueConverter 


] 


I| 正 向 转换 
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
| 

string uriStr = string.Format((a"/Resources/Images/ (0j jpg", (string)value); 

retum new BitmapImage(new Uri(uriStr, UriKind.Relative)); 


I| 未 被 用 到 
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
| 


throw new NotImplementedException(); 


有 了 这 两 个 Converter 之 后 我 们 就 可 以 设计 DataTemplate T 。 窗 体 完整 的 
XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication]. Window | " 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local-"clr-namespace: WpfApplication]" Height-"350" Width-"623" 

Title-" DataTemplate" 
«Window.Resources^ 
«|--Converters--» 
«]ocal:AutomakerToLogoPathConverter x:Key-"a2l" /> 
«local: NameToPhotoPathConverter x:Key-"n2p" /> 
«l--DataTemplate for Detail View--» 
«DataTemplate x: Keyz"carDetail View Template" > 
«Border BorderBrush-"Black" BorderThickness-" |" CornerRadius-"6"» 
«StackPanel Margin-"5"» 
<Image Width-"400" Height-"250" 
Sourcez" (Binding Name, Converterz(StaticResource n2p]]" /> 
SStackPanel Orientation-" Horizontal" Margin-"5,0"» 
<TextBlock Text-"Name:" FontWeight-" Bold" FontSize-"20" /> 
<TextBlock Textz" [Binding Name]" FontSize-"20" Margin-"5,0" /> 
</StackPanel> 
«StackPanel Orientation="Horizontal" Margin="5,0"> 
<TextBlock Text="Automaker:" FontWeight="Bold" /> 
<TextBlock Text="{Binding Automaker]" Margin-"5,0" /> 
<TextBlock Text="Year:" FontWeight="Bold" /> 
<TextBlock Text="{Binding Year]" Margin="5,0" /> 
<TextBlock Text="Top Speed:" FontWeight="Bold" /> 
<TextBlock Text="{Binding TopSpeed)" Margin="5,0" /> 
«JStackPanel^ 
«JStackPanel» 
</Border> 


</DataTemplate> 


«l--DataTemplate for Item View--» 
«DataTemplate x: Keyz"carListltemView Template" > 
«Grid Margin-"2"» 
«StackPanel Orientation-" Horizontal" 
«Image Sourcez" [Binding Automaker, Converterz(StaticResource a21]]" 
Grid. RowSpan-"3" Width-"64" Height-"64" /> 
XStackPanel Margin-"5,10"» 
<TextBlock Textz" [Binding Name)" FontSize-" 16" FontWeight-"Bold" /> 
<TextBlock Textz" [Binding Year]" FontSize-" 14" /> 
</StackPanel> 
</StackPanel> 
</Grid> 
</DataTemplate> 
</Window. Resources> 
<|-- 窗 体 的 内 容 --> 
<StackPanel Orientation-"Horizontal" Margin="5"> 
<UserControl Content Templatez" (StaticResource carDetailViewTemplate]" 
Contentz" Binding SelectedItem, ElementNamezlistBoxCars]" /> 
«ListBox x: Name-"listBoxCars" Width" 180" Margin-"5,0" 
ItemTemplatez"[StaticResource carListItemViewTemplate]" /> 
</StackPanel> 


«Window» 


TOROS TU SEECRHARUK: TEE TS iB] 8. ^ Frp foc E EB AE: 


e  ContentTemplate-" (StaticResource carDetailViewTemplate}"， 相 当 于 
给 一 个 普通 UserControl 的 数据 内 容 罕 上 一 件 外 衣 、 让 Car 类 型 数据 以 图 
X 3f JE By JÉ sX HE NES GR GE o a [fb BOX Wb OU 
x:Key-"carDetail ViewTemplate" pit B DataTemplate 5t 1/5 ° 


e temTemplate-"(StaticResource carListItemViewTemplate}"， 是 把 一 
件数 据 的 外 衣 交 给 ListBox ， 当 ListBox.ItemsSource 被 赋值 时 ，ListBox 
会 为 每 个 条 目 穿 上 这 件 外 衣 。 这 件 外 衣 是 以 
X:Key="carListItemViewTemplate" 标 记 的 DataTemplate 资 源 。 


因为 不 再 使 用 事件 驱动 ， 而 且 给 数据 容 衣 服 的 事 儿 也 已 自动 完成 ， 所 
以 后 台 的 C# 代 码 束 非常 简单 了 。 窗 体 的 C# 代 码 束 只 剩 下 这 些 : 


public partial class Window] : Window 


f 
1 


/构造 器 

public Window10) 

i 
InitializeComponent(); 
InitialCarList(); 


儿 初始 化 ListBox 
private void InitialCarList() 


| 


List<Car> carList = new List<Car>() 
| 

new Car(){ Automaker-" Lamborghini", Name="Diablo", Year-"1990", TopSpeed="340", 
Automaker-" Lamborghini", Name-"Murcielago", Year-"2001",  TopSpeed="353"}, 
Automaker-"Lamborghini", Name-"Gallardo", Year-"2003", — TopSpeed-" 325"], 
Automaker-" Lamborghini", Name-"Reventon", Year-"2008", — TopSpeed-"356"j, 


t 
new Car()! 
new Car()! 
new Car()! 


le 
Ís 


Ii 填充 数据 源 
this.listBoxCars.ItemsSource = carList; 


1 
f 


运行 程序 ， 效 果 如 图 11-7 所 示 ， 与 先前 使 用 UserControl 实 现 的 没有 任何 
区 别 。 用 户 永 远 不 会 知道 程序 员 在 后 全 使 用 了 什么 样 的 技术 与 模式 ， 

但 作为 程序 员 ， 我 们 可 以 清楚 地 体会 到 使 用 DataTemplate 可 以 让 程序 结 

构 更 清晰 、 代 码 更 简洁 、 维 护 更 方便 。 不 奔 张 地 说 ， 是 DataTemplate 攻 

f] IRSE e f a 界面 ”， 让 Binding 和 数据 关联 渗透 到 用 户 界 面 
和 每 -一 个 多 


a` DataTemplate 


Diablo 
1990 


Murcielago 
2001 


Reventon 
2008 


Name: Murcielago 
Automaker: Lamborghini Year: 2001 Top Speed: 353 


图 11-7 使 用 DataTemplate 后 的 运行 效果 
11.3 ”控件 的 外 衣 ControlTemplate 


每 每 提 到 ControlTemplate， 我 都 会 想起 “ 披 着 羊皮 的 狼 ” 这 人 句 话 一 一 披 上 
竹 皮 之 后 ， 虽 然 看 上 去 像 是 只 平 ， 但 其 行为 仍然 是 匹 猴 。 狠 的 行为 指 
的 是 它 会 做 吃 别 的 动物 、 对 着 满月 叫 等 事情 ， 探 件 也 有 上 自己 的 行 
为 ， 比 如 显示 数据 、 执 行 方法 、 激 发 事件 等 。 探 件 的 行为 要 靠 编 程 逻 
辑 来 实现 ， 所 以 也 可 把 控件 的 行为 称 为 控件 的 算法 内 容 。 举 个 例子 ， 
WPF 中 的 CheckBox 与 其 基 类 ToggleButton 在 功能 上 几乎 完全 一 样 ， 但 外 
观 上 区 别 却 非 常 大 ， 这 就 是 更 换 ControlTemplate 的 结果 。 经 过 更 换 
ControlTemplate ， 我 们 不 但 可 以 制作 出 披 着 CheckBox 外 衣 的 
ToggleButton， 还 能 制作 出 披 着 温度 计 外 衣 的 ProgressBar 控 件 。 


注意 
实际 项 目 中 ，ControlTemplate 主 要 有 两 大 用 武之 地 : 


e 通过 更 换 ControlTemplate 改 变 控件 外 观 ， 使 之 具有 更 优 的 用 户 使 用 体验 及 外 观 。 


o 借助 ControlTemplate， 程 序 员 与 设计 师 可 以 并 行 工作 ， 程 序 员 可 以 先 用 WPF 标 准 控 件 进 行 
编程 ， 等 设计 师 的 工作 完成 后 ， 只 需 把 新 的 ControlTemplate 应 用 到 程序 中 就 可 以 了 。 


较 之 传统 GUI 开发 ， 这 两 点 都 能 极 大 地 提高 工作 效率 。 第 一 点 让 程序 更 
换 皮 肤 变 得 非常 容易 ， 第 二 点 则 解决 了 团队 分 工 与 合作 的 问题 。 比 如 
程序 员 人 A 在 开发 一 个 物理 实验 仿真 程序 时 需要 一 个 温度 计 组 件 ， 他 请 程 
序 员 B 来 制作 这 个 组 件 ， 程 序 员 B 和 设计 师 C 共 同 完成 组 件 开 发 。A 可 以 
要 求 B 在 实现 这 个 组 件 时 和 又 露 的 接口 与 ProgressBar 保 持 一 致 并 先 用 
ProgressBar 蔡 代 ， 这 需要 B 使 用 装饰 者 模式 小 心 编 程 ，A 还 要 冒 点 小 风 
险 ， 万 一 B 实 现 的 接口 与 ProgressBBar 有 出 入 ， 巷 换 控 件 的 时 候 就 压 烦 了 

(替换 控件 需要 添加 程序 集 引 用 、 名 称 空间 3 引用， 本 身 就 已 经 够 矿 烦 
T) 。A 也 可 以 不 要 求 B 一 定 按照 ProgressBar 的 接口 来 编程 ，A 可 以 先 
去 写 别 的 部 分 ， 等 B 的 工作 完成 后 再 读 一 读 新 控件 的 文档 然后 继续 这 音 
分 工作 ， 而 实际 工作 中 ， 有 没有 文档 是 一 回 事 ， 读 别人 的 文档 或 代码 
本 身 就 挺 浪费 时 间 。 使 用 ControlTemplate 情 况 会 好 很 多 ，A 可 以 直接 用 
ProgressBar、 读 着 MSDN 文 档 来 编程 ， 并 请 设计 师 C 来 完成 一 个 让 
ProgressBar 看 起 来 像 是 个 温度 计 的 ControlTemplate，C 的 工作 完成 后 只 
需要 把 一 段 KAML 代 码 拷贝 到 程序 中 并 应 用 新 的 ControlTemplate， 工 作 
就 完成 了 一 一 省 人 、 省 时 、 省 力 、 省 心 。 


如 何 为 控件 设计 ControlITemplate 呢 ?首先 需要 你 了 解 每 个 控件 的 内 部 结 
构 。 你 可 能 会 问 :“ 在 哪儿 可 以 查 到 控件 的 内 部 结构 呢 ? ”。 没 有 文档 
可 查 ， 想 知道 一 个 控件 的 内 部 结构 就 必须 把 控件 “ 打 雄 * 了 看 一 看 。 用 
于 打 侠 控件、 查看 内 部 结构 的 工具 就 是 Microsoft Expression 套 装 中 的 
Blend， 目 前 最 狐 的 版 本 是 Blend 3.0 ° 


11.3.1 JE] CF Bis 


HRT IERE, PATIFE E AM AT RHJACP e TextBox fil 
Button 最 简单 ， 我 们 就 从 这 两 个 控件 开始 。 运 行 Blend， 新 建 一 个 WPF 
项 目 (或 者 打开 一 个 由 VS 2008 创 建 的 WPF 项 目 ) ， 先 把 窗 体 的 背景 
改 为 线性 渐变 ， 再 在 窗 体 的 主 容器 Grid 里 画 上 两 个 TextBox 和 一 个 
Button。 对 于 程序 员 来 说 ， 完 全 可 以 把 Blend 理 解 为 一 个 功能 更 强大 的 
窗 体 设计 器 ， 而 对 于 设计 师 来 说 ， 可 以 把 Blend 理 解 为 会 写 XAML 代 码 
的 Photoshop 或 Fireworks。 程 序 运行 效果 如 图 11-8 所 示 。 


à MainWindow 


图 11-8 ”运行 效果 


现在 的 TextBox 方 方正 正 、 有 椤 有 角 ， 与 窗 体 和 Button 的 圆 角 风格 不 太 
协调 ， 怎 样 让 它 的 边框 变 为 圆 角 和 矩形 呢 ? 传统 的 方法 可 能 是 创建 一 个 
UserControl 并 在 TextBox 外 套 上 一 个 Border， 然 后 还 要 声明 一 些 属性 和 
方法 暴露 封装 在 UserControl 里 的 TextBox 上。 我 们 的 办 法 是 在 TextBox 上 
右 击 ， 在 弹出 琳 单 中 选择 Edit Template > Edit a Copy...， 如 图 11-9 所 
示 “。 


Make Into UserControl.. 
Make Into Control... 


Edit Template Ld 


Edit Additional Templates d Edit a Copy... 


Create Empty... 


图 11-9 ”打开 菜单 


之 所 以 不 选择 Create Empty 是 因为 Create Empty 是 从 头 开 始 设 计 一 个 控 
件 的 ControlTemplate， 新 做 衣服 哪 如 改 衣服 快 呀 ! 单 击 荣 单 项 后 弹出 资 
源 对 话 框 ， 尽 管 可 以 用 C# 代 码 来 创建 ControlTemplate， 但 绝 大 多 数 情 
况 下 ControlTemplate 是 由 XAML 代 码 编写 的 并 放 在 资源 词典 里 ， 所 以 才 
会 弹出 对 话 框 询问 你 资源 的 x:Key 是 什么 、 打 算 把 资源 放 在 哪里 。 作 为 


资源 ，ControlTemplate 可 以 放 在 三 个 地 方 : Application 的 资源 词典 里 、 
某 个 界面 元 素 的 资源 词典 里 ， 或 者 放 在 外 部 XAML 文 件 中 (请 大 家 回 
顾 第 10 章 ) 。 我 们 选择 把 它 放 在 Application 的 资源 词典 里 以 便 统一 管 
理 ， 并 命名 为 RoundCornerTextBoxStyle， 如 图 11-10 所 示 。 


Create Style Resource 


Name (Key) 
€* RoundComerTextBoxStyle 


Apply to all 
Define in 
* Application 


This document Window: Window 


图 11-10 ”资源 对 话 框 


单 击 OK 按钮 便 进入 了 控件 的 模板 的 编辑 状态 。 在 Objects and Timeline 
面板 中 观察 已 经 解剖 开 的 TextBox 控 件 ， 发 现 它 是 由 一 个 名 为 Bd 的 
ListBoxChrome 套 着 一 个 名 为 PART_ContentHost 的 ScrollViewer 组 成 的 
(如 图 11-11 所 示 ) 。 为 了 显示 圆 角 和 矩形 边框 ， 我 们 只 需要 把 最 外 层 的 
0 、 删 控 Border 不 具备 的 属性 值 、 设 置 它 的 
弧度 即 可 。 


Objects and Timeline 


£ RoundCornerTextBoxStyle (TextBox Template) 


v ® Template 
v œ Bd 
ES PART ContentHost 


图 11-11 ”模板 的 编辑 状态 
更 改 后 的 核心 代码 如 下 : 


«Style x: Key-"RoundCornerTextBoxStyle" BasedOn-" [x:Null]" TargetType-" x: Type TextBox} "^ 
«Setter Propertyz" Template" 
«Setter. Value 
«ControlTemplate TargetType-" [x Type TextBox} "> 
«Border x: Name-"Bd" SnapsToDevicePixels-"true" 
Background-" / TemplateBinding Background]" 
BorderBrush-" | TemplateBinding BorderBrushj" 
BorderThickness-" | TemplateBinding BorderThickness;" 
CornerRadiusz" 5" 
<ScrollViewer x: Name-"PART ContentHost" 
SnapsToDevicePixels-" | TemplateBinding SnapsToDevicePixels]" /> 
«[Border» 
«|- Template 的 其 他 内 容 --> 
</ControlTemplate> 
</Setter. Value? 
</Setter> 
<!-- 其 他 Setter--> 
«Style» 


这 段 代 码 有 如 下 几 个 看 点 : 


看 点 一 


软 以 后 会 
<Setter>， 也 就 是 一 组 属性 设置 器 。 


候 ， 窗 体 设 计 器 不 是 能 生成 这 样 的 代码 吗 : 


， 作 为 资源 的 不 是 单纯 的 ControlTemplate 而 是 Style， 说 是 编辑 
ControlTemplate 但 实际 上 是 把 ControlTemplate 包 含 在 Style 里 ， 不 知道 微 
\ 会 更 正 这 个 小 麻烦 。Style 是 什么 呢 ? 简单 讲 就 是 一 组 
回想 一 下 Windows Forms 编 程 的 时 


private void InitializeComponent() 

| 
Mf 
İl textBoxl 
this.textBox Location = new System.Drawing.Point(12, 12); 
this.textBox 1. Name = "textBox1"; 
this.textBox1.Size = new System.Drawing.Size( 100, 20); 
this.textBox 1. TabIndex = 0; 


Íl button] 

this.buttonl.Location = new System.Drawing.Point(12, 38); 
this.button] Name = "button]"; 

this.button].Size = new System.Drawing.Size(100, 23); 
this.button] TabIndex = 1; 

this.button] Text = "button1"; 

I 


同样 的 逻辑 如 果 在 XAML 里 出 现 就 变 成 了 这 样 : 


«Style» 
«Setter Property-"pNamel" Value" value" /> 
«Setter Property-"pName2" Value" value" > 
«Setter Property-"pName3" 
«Setter. Value» 
«1--Object Value--> 
«/Setter. Value» 
</Setter> 
<Setter Property="pName4"> 
<Setter, Value> 
<!--Object Value--> 
</Setter, Value» 
</Setter> 


</Style> 
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示 ， 如 采 Value 值 不 能 用 一 个 简单 的 字符 串 描述 就 需要 使 用 XAML 的 属 
性 对 象 语法 。 例 子 中 ，TextBox 的 Template 属 性 是 一 个 ControlTemplate 
对 象 ， 如 此 复杂 的 值 只 能 使 用 属性 对 象 语 法 来 描述 。 对 于 Style， 后 面 
会 有 专门 的 章节 来 介绍 。 


看 点 二 ， 直 接 将 原来 的 ListBoxChrome 标 签 蔡 换 成 了 Border 标 签 ， 去 挥 
Border 不 具备 的 属性 并 添加 了 CornerRadius="5"。 


看 点 三 ，TemplateBinding。ControlTemplate 最 终 将 被 应 用 到 一 个 控件 
上 ， 我 们 称 这 个 控件 为 模板 目标 控件 或 模板 化 控件 (Templated 
Control) ，ControlTemplate 里 的 控件 可 以 使 用 TemplateBinding 将 自己 的 
属性 值 关 联 在 目标 控件 的 某 个 属性 值 上 ， 必 要 的 时 候 还 可 以 添加 
Converter。 例 如 Background="{TemplateBinding Background}" 这 人 句 ， 意 
思 是 让 Border 的 Background 与 模板 目标 控件 保持 一 致 ， 产 生 的 效果 职 是 
你 为 模板 的 目标 控件 设置 Background 属 性 ，Border 的 Background 也 会 跟 
着 变 。 回 顾 Binding 章 节 ， 你 会 发 现 TemplateBinding 的 功能 与 {Binding 
RelativeSource={RelativeSource TemplatedParent}} 一 致 。 


好 了 ! 把 我 们 设计 的 圆 角 Style 应 用 到 两 个 TextBox 上 ， 代 码 如 下 : 


«Window xmlns-"http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class-"WpfApplicationl.MainWindow" — Title-"Control Template" 
Width-"270" Height-"180"» 

«Window.Background» 

«LinearGradientBrush EndPoint-"0.5, 1" StartPoint-"0.5,0"» 
«GradientStop Color="#FF00B0FF" Offset-"0" /> 
«GradientStop Color" White" Offset-"1" /> 

</LinearGradientBrush> 

</Window.Background> 
<StackPanel> 
<TextBox Style="{DynamicResource RoundCorner TextBoxStyle]" 
Height-"30" Margin="10" BorderBrush-"Black" /> 
«TextBox Style="{DynamicResource RoundCornerTextBoxStyle]" 
Height-"30"  Margin-" 10,0" BorderBrush-"Black" /> 

«Button Width-" 30" Height-"30" Content-"Button" Margin-" 10" /> 

</StackPanel> 

</Window> 


程序 的 运行 效果 如 图 11-12 所 示 “。 有 是 不 是 感觉 圆 角 的 TextBox 更 和 谐 呢 ? 


^ 


图 11-12 ”运行 效果 


以 同样 的 方法 “ 打 雄 "Button， 你 会 发 现 Button 的 内 部 结构 与 TextBox 的 差 
不 多 。 但 如 果 “ 打 人 雄 ” 一 个 ProgressBar， 你 会 发 现 它 的 内 部 结构 就 复杂 得 
多 了 ， 如 图 11-13 所 示 。 


Objects and Timeline 


全 ProgressBarStyle (ProgressBar Template) 


Midi Templiate 


Y iE Background 

0 [Rectangle] 

Œ [Border] 

Œ [Border] 

C3 PART Track 

“> PART Indicator 

v i8 Foreground 
O Indicator 
L3 Animation 
DD LeftDark 
C RightDark 
C LeftLight 
DD Centerlight 
口 RightLight 
Œ Highiight1 
** Highlight2 

@ [Border] 


图 11-13 ”ProgressBar 的 内 容 结构 


在 Blend 里 你 可 以 通过 控件 后 面 的 “有 眼睛 ”图标 控 制 控件 的 显 隐 ， 这 样 就 
能 区 分 出 每 个 子 控件 的 用 途 ， 这 也 是 学 习 控 件 设计 的 好 方法 。 如 果 想 
把 这 个 ProgressBar 改 造成 一 个 温度 计 ， 只 需要 在 此 基础 上 添加 一 个 背 
景 、 更 改进 度 指 示 器 控件 的 前 景色 、 再 在 合适 的 控件 外 面 套 上 一 个 画 
出 刻度 的 Grid (刻度 可 以 根据 要 求 计算 出 来 也 可 以 是 固定 的 ) 。 


不 知 大 家 意识 到 没有 ， 其 实 每 个 控件 本 号 就 是 一 棵 UI 元 素 树 。WPF 的 
UI 元 素 可 以 看 作 两 棵 树 LogicalTree 和 VisualTree， 这 两 棵 树 的 交点 
就 是 ControlITemplate。 如 果 把 界面 上 的 控件 元 素 看 作 是 一 个 结 点 ， 那 元 
素 们 构成 的 就 是 LogicalTree， 如 果 把 控件 内 部 由 ControlTemplate 生 成 的 
控件 也 算 上 ， 那 构成 的 就 是 VisualTree。 换 句 话 说 ， 在 LogicalTree 上 导 
航 不 会 进入 到 控件 内 部 ， 而 在 VisualTree 上 导航 则 可 检索 到 控件 内 部 由 
ControlTemplate 生 成 的 子 级 控件 。 


11.3.2 ItemsControl 的 PanelTemplate 


ItemsControl 具有 一 个 名 为 ItemsPanel 的 属性 ， 它 的 数据 类 型 为 
ItemsPanelTemplate ° ItemsPanelTemplate 也 是 一 种 控件 Template， 它 的 
作用 就 是 让 程序 员 有 机 会 控制 temsControl 的 条 目 容器 。 


举例 而 言 ， 我 们 的 印象 中 ListBox 中 的 条 目 都 是 和 目 上 而 下 排列 的 ， 如 果 
客户 要 求 我 们 制作 一 个 条 目 水 平 排列 的 ListBox 怎 么 办 呢 ? WPF 之 前 ， 
我 们 只 能 重 写 控件 比较 底层 的 方法 和 属性 ， 而 现在 我 们 只 需要 调整 
ListBox 的 ItemsPanel 属 性 。 请 看 下 面 的 代码 。 


这 是 一 个 没有 经 过 调整 的 ListBox， 条 目 纵 疝 排列 。 


«Grid Margin-"6"» 
«ListBox» 
<TextBlock Text-"Allan" /> 
<TextBlock Text-"Kevin" /> 
<TextBlock Text-"Drew" /> 
«TextBlock Text-"Timothy" /> 
</ListBox> 
</Grid> 


如 果 我 把 代码 更 改 成 这 样 : 


«Grid Margin-"6"» 
«ListBox^ 
«l--[temsPanel--» 
«ListBox.ItemsPanel» 
«ItemsPanel Template» 
«StackPanel Orientationz "Horizontal" /> 
«IItemsPanel Template» 
«[ListBox.ItemsPanel» 
<|- 条 目 --> 
<TextBlock Text-"Allan" /> 
<TextBlock Text="Kevin" /> 
<TextBlock Text="Drew" /> 
<TextBlock Text="Timothy" /> 
</ListBox> 
</Grid> 


条 目 就 会 包装 在 一 个 水 平 排列 的 StackPanel 中 ， 从 而 横向 排列 ， 如 图 11- 
14 所 示 。 
ListBox ItemsPanel 


Allan 
ListBox ItemsPanel 


Drew 


Timothy Allan Keil imt 


图 11-14 ”条 目 水 平 排列 的 ListBox 效 果 


11.4 DataTemplate 与 ControlTemplate 的 关系 与 应 用 


11.4.1 DataTemplate 与 ControlTemplate 的 关系 


学 习 过 DataTemplate 和 ControlTemplate ， 你 应 该 已 经 体会 到 ， 控 件 只 是 
个 数据 和 行为 的 载体 、 是 个 抽象 的 概念 ， 至 于 它 本 身 会 长 成 什么 样子 

(控件 内 部 结构 ) 、 它 的 数据 会 长 成 什么 样子 (数据 显示 结构 ) 都 是 
靠 Template 生 成 的 。 决 定 控 件 外 观 的 是 ControlTemplate， 决 定数 据 外 观 
的 是 DataTemplate， 它 们 正 是 Control 类 的 Template 和 ContentTemplate 两 
个 属性 的 值 。 它 们 的 作用 范围 如 图 11-15 所 示 。 


ControlTemplate 


作用 范围 


控件 本 映 
(包括 内 容 区 域 》 


DataTemplate 


ERIS ERI 


图 11-15 “作用 范围 图 


几 是 Template， 最 终 都 是 要 作用 在 控件 上 的 ， 这 个 控件 束 是 Template 的 
目标 控件 ， 也 叫 模 板 化 控件 (Templated Control) 。 你 可 能 会 
问 : “DataTemplate 的 目标 应 该 是 数据 呀 ， SA xd 
件 ? ”DataTemplate 给 人 的 感觉 的 确 是 施加 在 了 数据 对 象 上 ， 但 施加 在 
数据 对 象 上 生成 的 一 组 控件 总 得 有 个 载体 吧 ? 这 个 载体 一 般 是 落实 在 
一 个 ContentPresenter 对 和 象 上 。ContentPresenter 类 只 有 ContentTemplate 属 
性 、 没 有 Template 属 性 ， 这 就 证 明了 承载 由 DataTemplate 生 成 的 一 组 控 
件 是 它 的 专门 用 途 。 


至 此 我 们 可 以 看 出 ， 由 ControlTemplate 生 成 的 控件 树 其 树 根 就 是 
ControlTemplate 的 目标 控件 ， 此 模板 化 控件 的 Template 属 性 值 束 是 这 个 
ControlTemplate 实 例 ; 与 之 相仿 ， 由 DataTemplate 生 成 的 控件 树 其 树 根 
是 一 个 ContentPresenter 控 件 ， 此 模板 化 控件 的 ContentTemplate 属 性 值 束 


ÆN DataTemplate Z ff] » [| 73 ContentPresenter?5 F z& Control Template 
控件 树 上 的 一 个 结 点 ， 所 以 DataTemplate: 控件 树 是 ControlTemplate 控 件 
树 的 一 棵 子 树 。 它 们 的 关系 如 图 11-16 所 示 。 


图 11-16 ”DataTemplate 与 ControlTemplate 的 关系 


既然 Template 生 成 的 控件 树 都 有 根 ， 那 么 如 何 找 到 树 根 呢 ? 办 法 非常 简 
单 ， 每 个 控件 都 有 个 名 为 TemplatedParent 的 属性 ， 如 果 它 的 值 不 为 
null， 说 明 这 个 控件 是 由 Template 目 动 生 成 的 ， 而 属性 值 束 是 应 用 了 模 
板 的 控件 (模板 的 目标 ， 模 板 化 控件 ) 。 如 果 由 Template 生 成 的 控件 使 
用 了 TemplateBinding 获 取 属 性 值 ， 则 TemplateBinding 的 数据 源 丈 是 应 用 
了 这 个 模板 的 目标 控件 。 


回顾 一 下 本 章 开头 的 DataTemplate 实 例 代码 : 


«DataTemplate? 
«Grid» 
«StackPanel Orientation-"Horizontal"- 
«Grid» 
«Rectangle Stroke" Yellow" Fill-"Orange" Width-" | Binding Price" /> 
<TextBlock Text-" | Binding Year]" /> 
</Grid> 
<TextBlock Text-" | Binding Price}" Margin" 5,0" /> 
«/StackPanel» 
</Grid> 


</DataTemplate> 


这 里 用 到 的 是 普通 Binding 而 不 是 TemplateBinding ， 那 数据 源 又 是 谁 
UE? 不 知 大 家 是 否 还 记得 ， 当 为 一 个 Binding 只 指定 Path 不 指定 Source 
时 ，Binding 会 沿 着 逻辑 树 一 直 癌 上 找 、 查 看 每 个 结 点 的 DataContext 属 
性 ， 如 果 DataContext 引 用 的 对 象 具有 Path 指 定 的 属性 名 ，Binding 束 会 
把 这 个 对 象 当 作 目 己 的 数据 源 。 显 然 ， 如 果 把 数据 对 象 赋值 给 
ContentPresenter 的 DataContext 属 性 ， 由 DataTemplate 生 成 的 控件 目 然 会 
找到 这 个 数据 对 象 并 把 它 当 作 上 自己 的 数据 源 。 


11.4.2 ”DataTemplate 与 ControlTemplate 的 应 用 


为 Template 设 置 其 应 用 目标 有 两 种 方法 ,一 种 是 未 个 设置 控件 的 
ee Du 等 属性 ， 不 想 应 用 
Template 的 控件 不 设置 ; 另 一 种 是 整体 应 用 ， 即 把 Template 应 用 在 某 个 
类 型 的 控件 或 数据 上 。 


把 ControlTemplate 应 用 在 所 有 目标 上 需要 借助 Style 来 实现 ， 但 Style 不 能 
标记 x:Key， 例 如 下 面 的 代码 : 


«Window x:Class-"WpfApplication2. Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Template" 
Height-" 150" Width-"230"» 

«Window.Resources 
«Style Target Typez" [x: Type TextBox]"» 
«Setter Property-" Template"? 
«Setter. Value? 
«ControlTemplate TargetType-" [x: Type TextBoxj"» 
<!-- 与 前 面 例子 相同 --> 
</ControlTemplate> 
«JSetter. Value» 
«/Setter^ 
«Setter Property-" Margin" Value" 5" /> 
«Setter Property-" BorderBrush" Value-"Black" /> 
«Setter Property-" Height" Value-"25" /> 
</Style> 
</Window.Resources> 
«StackPanel» 
«TextBox /> 
«TextBox /> 
«TextBox Stylez" [x:Null]" Marginz"5" /> 
«/StackPanel» 
</Window> 


Style 没 有 x:Key 标 记 ， 默 认为 应 用 到 所 有 由 x:Type 指 定 的 控件 上 ， 如 果 
不 想 应 用 则 需 把 控件 的 Style 标 记 为 {x:Null}。 运 行 效果 如 图 11-17 所 示 。 


E Template 


没有 应 用 Style 的 TextBo 


图 11-17 运行 效果 
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把 DataTemplate 应 用 在 某 个 数据 类 型 上 的 方法 是 设置 DataTemplate 的 
DataType 属 性 ， 并 且 DataTemplate 作 为 资源 时 也 不 能 市 有 x:Key 标 记 。 
例如 下 面 的 代码 : 


«Window x:Class-"WpfApplication |. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-"clr-namespace: W pfA pplication 1" 
xmlns:cz"clr-namespace:System.Collections;assemblyzmscorlib" 
Title-"DataTemplate" Height-"300" Width-"300"» 

«Window.Resources» 
<l--DataTemplate--> 
«DataTemplate DataType="{x:Type local:Unit}"> 


<Grid> 
«StackPanel Orientation="Horizontal"> 
<Grid> 
«Rectangle Stroke="Yellow" Fill="Orange" Width-" | Binding Price}" /> 
<TextBlock Text-" (Binding Year}" /> 
</Grid> 
<TextBlock Text=" {Binding Price}" Margin-"5,0" /> 
</StackPanel> 
</Grid> 
«/DataTemplate? 
«- ili 


«c: ArrayList x:Key-"ds"» 
xJocal:Unit Year-"2001 年 " Price-" 100" /> 
<local:Unit Year-"2002 年 " Price-" 120" /> 
]ocal:Unit Year-"2003 年 " Price-" 140" /> 
<local:Unit Year-"2004 年 " Price" 160" /> 
<local:Unit Year="2005 年 " Price-"180" /> 
<local:Unit Year-"2006 年 " Price-"200" /> 
<lc:ArrayList> 
</Window. Resources> 
<StackPanel> 
«ListBox ItemsSource="{StaticResource ds]" /> 
«ComboBox ItemsSourcez"[StaticResource ds]" Marginz"5" /> 
«/StackPanel» 
</Window> 


代码 中 DataTemplate 的 目标 数据 类 型 和 ListBox 的 条 目 类 型 都 是 Unit: 


public class Unit 
| 
public int Price | get; set; } 
public string Year { get; set; } 
j 


此 时 DataTemplate 会 和 目 动 加 载 到 所 有 Unit 类 型 对 象 上 ， 尽 管 我 并 没有 为 
ListBox 和 ComboBox 指 定 ItemsTemplate， 一 样 会 得 到 如 图 11-18 所 示 的 
运行 效果 。 
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图 11-18 ”运行 效果 


很 多 时 候 数 据 是 以 XML 形 式 存储 的 ， 如 果 把 XML 结 点 完 转换 成 CLR 数 
据 类 型 再 应 用 DataTemplate 就 太 麻 烦 了 “。DataTemplate 很 智能 ， 具 有 和 直 
接 把 XML 数据 结 点 当 作 目 标 对 象 的 功能 一 -XML 数据 中 的 元 素 名 ( 标 
签名 ) 可 以 作为 DataType， 元 素 的 子 结 点 和 Attribute 可 以 使 用 XPath 来 
访问 。 下 面 的 代码 使 用 XmlDataProvider 作 为 数据 源 〈 其 XPath 指出 的 必 
须 是 一 组 结 点 ) ， 请 注意 细节 之 处 的 变化 〈 已 用 粗 体 标 出 ) : 


«Window Background-"Cornsilk" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class-"WpfApplicationl Window" Title-"DataTemplate" 
SizeToContent-" WidthAndHeight"» 

<Window.Resources> 
<!--DataTemplate--> 
<DataTemplate DataType=" Unit"> 


«Grid» 
«StackPanel Orientation-"Horizontal"» 
«Grid» 
«Rectangle Stroke-"Yellow" Fill-"Orange" 
Width-" [Binding XPathz G Price)" /> 
<TextBlock Text-" [Binding XPathz? Year" /> 
</Grid> 
<TextBlock Text-" [Binding XPath=@Price}" Margin-"5,0" /> 
</StackPanel> 
</Grid> 


</DataTemplate> 


<!-- 数 据 源 --> 
«XmlDataProvider x:Key-"ds" XPath="Units/Unit"> 
«x;XData? 
«Units xmlns=""> 
«Unit Year-"2001" Price-" 100" /> 
Unit Year-"2001" Price" 120" /> 
«Unit Year-"2001" Price-" 40" /> 
«Unit Year-"2001" Price-"160" /> 
«Unit Year-"2001" Price-"180" /> 
Unit Year-"2001" Price-"200" /> 
</Units> 
</x:XData> 
</XmlDataProvider> 


A 


A, 


</Window. Resources> 
<StackPanel> 

«ListBox ItemsSource="{Binding Source={StaticResource ds]]" /> 

<ComboBox ItemsSource="{Binding Sourcez(StaticResource ds}}" Margin-"5" /> 
</StackPanel> 


</Window> 


XML 最 大 的 优势 是 可 以 方便 地 表示 市 有 层级 的 数据 ， 比 如 “年 级 ~ 班级 
”人 小 组 ”或 “ 主 荣 单 -~ 次 级 薪 单 ”三 级 薪 单 ”。 同 时 ，WPF 和 准备 了 
TreeView 和 Menultem 控 件 用 来 显示 层级 数据 。 能 够 帮助 层级 控件 显示 
层级 数据 的 模板 是 HierarchicalDataTemplate。 下 面 是 两 个 实际 工作 中 和 党 
见 的 例子 。 

第 一 个 例子 是 使 用 TreeView 显 示 多 层级 、 不 同类 型 数据 。 因 为 数据 类 
型 不 同 ， 所 以 我 们 需要 为 每 种 数据 设计 一 个 模板 ， 这 束 有 机 会 使 每 种 
数据 类 型 有 自己 独特 的 外 观 。 


数据 保存 在 项 目 根 目录 的 Data.xml 文 件 中 ， 内 容 如 下 : 


<?xml version-" 0" encoding-"utf-8" ?> 
«Data xmlns=""> 
«Grade Name=" 一 年 级 必 
«Class Name=" 甲 班 "> 
«Group Name-"A "> 
«Group Name="B 组 " 户 
«Group Name-"C Zl" 
</Class> 
«Class Name=" 乙 班 '> 
«Group Name-"A 组 " 户 
«Group Name="B 组 " 户 
«Group Name="C 组 " 心 
SClass> 
</Grade> 
«Grade Name=" 二 年 级 "> 
«Class Name=" 甲 班 "> 
«Group Name-"A Zi"/» 
«Group Name-"B #A"/> 
«Group Name-"C £l"/» 
</Class> 
«Class Name=" 乙 班 "> 
«Group Name="A 组 "> 
«Group Name="B #"/> 
«Group Name-"C #A"/> 
</Class> 
</Grade> 
</Data> 


程序 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication]. Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"HierarchicalDataTemplate" Height-"300" Width-"300"» 

«Window.Resources» 
«LA 
«XmlDataProvider x:Key-"ds" Source-"Data.xml" XPath-"Data/Grade" /> 
<-- 年 级 模板 -> 
<HierarchicalDataTemplate DataType="Grade" ItemsSource-" {Binding XPath=Class}"> 
<TextBlock Text="{Binding XPath-()Name]" /> 
«/HierarchicalDataTemplate 
<-- 班 级 模板 -> 
«HierarchicalDataTemplate DataType-" Class" ItemsSource-" [Binding XPath=Group}"> 
«RadioButton Content-" | Binding XPath=@Name}" GroupName-"gn" /> 
«|HierarchicalDataTemplate? 
<|-- 小 组 模板 --> 
«HierarchicalDataTemplate DataType-" Group" ItemsSource="{Binding XPath=Student} "> 
<CheckBox Content="{Binding XPath=@Name}" /> 
</HierarchicalDataTemplate> 
</Window. Resources> 
«Gnd» 
«TreeView Margin-"5" ItemsSource-" [Binding Source- [StaticResource ds] |" /> 
</Grid> 
</Window> 


程序 运行 效果 如 图 11-19 所 示 。 
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图 11-19 运行 效果 


第 二 个 例子 是 同一 种 数据 类 型 的 租 套 结构 ， 这 种 情况 下 只 设计 一 个 
HierarchicalDataTemplate 就 可 以 了 ， 它 会 产生 自动 迭代 应 用 的 效果 。 


数据 仍然 存放 在 Data.xml 文 件 中 ， 数 据 全 都 是 Operation 类 型 : 


«xml version-"].0" encoding-"utf-8" ?> 
«Data xmlns-""» 
«Operation Name=" 文 件 " Gesture="F"> 
«Operation Name=" 新 建 " Gesture-"N'» 
«Operation Name=" 项 目 " Gesture="Control + P"/» 
«Operation Name=" 网 站 " Gesture="Control + W"/» 
«Operation Name=" 文 档 " Gesture="Control  D'/» 
</Operation> 
«Operation Name=" 保 存 " Gesture-" S"/» 
«Operation Name=" 打 印 " Gesture="P"/> 
«Operation Name=" 退 出 " Gesture-"X"/» 
«/Operation 
«Operation Name=" 编 辑 " Gesture-"E"» 
«Operation Name=" 拷 由 " Gesture="Control  C"/» 
«Operation Name=" 前 切 " Gesture-"Control + X"/» 
«Operation Name=" 粘 贴 " Gesture="Control + V"/> 
«/Operation? 
</Data> 


程序 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication].Window]" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys-"clr-namespace:System;assembly-mscorlib" 
Title-"HierarchicalDataTemplate" Height-"300" Width-"300"» 

«Window.Resources 
<|- 数 据 源 --> 
<XmlDataProvider x: Key-"ds" Source-"Data.xml" XPath-"Data/Operation" /> 
«l--Operation 模板 --> 
<HierarchicalDataTemplate DataType="Operation' 
ItemsSource-" [Binding XPath=Operation}"> 
«StackPanel Orientation-"Horizontal" 
<TextBlock Text-" [Binding XPath=(2Name}" Margin-"10, 0" /> 
<TextBlock Text-" [Binding XPath-(üGesture]" /> 
</StackPanel> 
</HierarchicalDataTemplate> 
</Window.Resources> 
<StackPanel> 
«Menu ItemsSource-" [Binding Source={StaticResource ds] ]" /> 
</StackPanel> 
</Window> 


运行 效果 如 图 11-20 所 示 。 


B` HierarchicalDataTemplate 


ZiB Control +P 
网 站 Control + W 
文档 Control + D 


| 
x 
Nm 
7 也 


图 11-20 ”运行 交 


值得 一 提 的 是 ，HierarchicalDataTemplate 的 作用 目标 不 是 Menultem 的 内 
容 ， 而 是 它 的 Header。 如 果 对 MenuItem 的 单 击 事件 进行 侦 听 处 理 ， 我 
们 就 可 以 从 被 单 击 Menultem 的 Header 中 取出 XMIL 数 据 。 


XAML 代 码 如 下 : 


<StackPanel Menultem,Click="StackPanel Click"> 
«Menu ItemsSource-" | Binding Source={StaticResource ds}}" > 
«/StackPanel^ 


事件 处 理 器 代码 如 下 : 


private void StackPanel Click(object sender, RoutedEventArgs e) 
| 


Menultem mi = e.OriginalSource as Menultem; 
XmlElement xe = mi.Header as XmlElement; 
MessageBox.Show(xe.Attributes[" Name" ]. Value); 


| 


运行 程序 、 单 击 菜 单项 ， 效 果 如 图 11-21 所 示 。 
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图 11-21 ”运行 效果 


一 旦 拿 到 数据 ， 使 用 数据 去 驱动 什么 样 的 逻辑 就 完全 由 你 来 决定 了 。 
比如 可 以 维护 一 个 CommandHelper 类 ， 根 据 拿 到 的 数据 来 决定 执行 什 


么 RoutedCommand ° 
11.4.3 “寻找 失落 的 控件 


“ 井 水 不 犯 河 水 ”常用 来 形容 两 个 组 织 之 间 界 限 分 明 、 互 不 相干 ， 
LogicalTree 人 与 控件 内 部 这 棵 小 树 之 间 束 保持 着 这 样 的 天 系 。 换 句 话 说 ， 
如 果 UI 元 素 树 上 有 个 x:Name="TextBox1" 的 控件 ， 某 个 控件 内 部 也 有 一 
个 由 Template 生 成 的 x:Name="TextBox1" 的 控件 ， 它 们 并 不 冲突 ， 
LogicalTree 不 会 看 到 控件 内 部 的 细 市 ， 控 件 内 部 元 素 也 不 去 理会 控件 外 
面 有 什么 。 你 可 能 会 想 : “这 样 一 来 ， 万 一 我 想 从 外 界 访问 Template 内 
部 的 控件 、 获 取 它 的 属性 值 ， 岂 不 是 做 不 到 了 ? ”放心 ，WPF 为 我 们 准 
"s 问 控 件 内 部 小 世界 的 入 口 ， 现 在 就 让 我 们 出 发 去 寻找 那些 失落 
J7 | 


由 ControlTemplate 或 DataTemplate 生 成 的 控件 都 是 “由 Template 生 成 的 控 
't " e ControlTemplate 和 DataTemplate W ^^ X 35 W £ B 
FrameworkTemplate 类 ， 这 个 类 有 个 名 为 FindName 的 方法 供 我 们 检索 其 
内 部 控件 。 也 就 是 说 ， 只 要 我 们 能 拿 天 Template， 找 到 其 内 部 控件 就 不 
成 问题 。 对 于 ControlTemplate 对 象 ， 访 问 其 目标 控件 的 Template 属 性 就 
能 拿 到 ， 但 想 拿 天 DataTemplate 对 象 就 要 费 一 番 周 折 了 。 千 万 不 要 以 为 
ListBoxItem 或 者 ComboBoxItem 容 器 就 是 DataTemplate 的 目标 控件 哦 ! 
为 控件 "nde 性 和 ContentTemplate 属 性 可 是 两 码 事 (请 参考 前 
一 小 广内 容 ) 。 


我 们 先 来 寻找 由 ControlTemplate 生成 的 控件 。 首 先 设计 一 个 


ControlTemplate 并 把 它 应 用 在 一 个 UserControl 上 。 界 面 上 还 有 一 个 
Button， 在 它 的 Click 事 件 处 理 器 中 我 们 检索 由 ControlTemplate 生 成 的 代 


程序 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Control Template" 
Height-"1 72" Width="300"> 

«Window.Resources 
«ControlTemplate x: Key-"cTmp" 
«StackPanel Background-"Orange"» 
«TextBox x:Name="textBox1" Margin-"6" /> 
«TextBox x: Name-"textBox2" Margin-"6,0" /> 
«TextBox x:Name-"textBox3" Margin-"6" /> 
</StackPanel> 
«/ControlTemplate? 
</Window. Resources> 
«StackPanel Background="Yellow"> 
<UserControl x:Name="uc" Template=" {StaticResource cTmp}" Margin-"5" /> 
«Button Content="Find by Name" Width-"120" Height="30" Click-"Button Click" /> 
</StackPanel> 
</Window> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button. Click(object sender, RoutedEventArgs e) 

| 
TextBox tb = this.uc. Template.FindName("textBox 1", this.uc) as TextBox; 
tb. Text = "Hello WPF"; 
StackPanel sp = tb.Parent as StackPanel; 
(sp.Children[1] as TextBox). Text = "Hello Control Template"; 
(sp.Children[2] as TextBox). Text 7 "I can find you!"; 


运行 程序 并 单 击 按钮 ， 效 果 如 图 11-22 所 示 。 
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图 11-22 ”运行 效果 


接 下 来 我 们 来 寻找 由 DataTemplate 生 成 的 控件 。 不 过 在 正式 开始 之 前 ， 
请 大 家 先 思 考 一 个 问题 : 寻找 到 一 个 由 DataTemplate 生 成 的 控件 后 ， 我 
们 想 从 中 获取 哪些 数据 ， 如 果 想 获得 单纯 与 用 户 界面 相关 的 数据 ( 比 
如 控件 的 宽度 、 高 度 等 ) ， 这 么 做 是 正确 的 ， 但 如 果 是 获取 与 业务 逻 
辑 相 关 的 数据 ， 那 就 要 考虑 程序 的 设计 是 不 是 出 了 问题 因为 WPF 
采用 数据 驱动 UI 逻辑 ， 获 取 业 务 逻 辑 数 据 的 事情 在 讨 层 束 能 做 到 ， 一 
般 不 会 跑 到 表层 上 来 找 。 


先 来 看 一 个 简单 的 例子 。 作 为 业务 逻辑 数据 的 类 如 下 : 


public class Student 

i 
public int Id { get; set; } 
public string Name { get; set; } 
public string Skill { get; set; } 
public bool HasJob { get; set; } 

] 


界面 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication] .Window]" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-"clr-namespace: WpfApplication]" Title-"DataTemplate" FontSize-"16" 
Height-"175" Width= 220"> 

<Window.Resources> 
<|-- 数 据 对 象 -> 
<local:Student x: Key-"stu" Id="1" Name="Timothy" Skill-"WPF" HasJob-"True" /> 
<|--DataTemplate--> 
<DataTemplate x:Key="stuDT"> 
«Border BorderBrush-"Orange" BorderThickness="2" CornerRadius="5"> 
<StackPanel> 
<TextBlock Text-" [Binding Id}" Margin-"5" /> 
<TextBlock x:Name-"textBlockName" Text=" {Binding Name}" Margin="5" /> 
<TextBlock Text="{Binding Skill}" Margin-"5" /> 
</StackPanel> 
</Border> 
</DataTemplate> 
</Window.Resources> 
<le- E ti -> 
<StackPanel> 
< ContentPresenter x: Name-"cp" Content="{StaticResource stu}" 
ContentTemplate="{StaticResource stuDT}" Margin="5" /> 
«Button Content="Find" Margin="5,0" Click-"Button Click" /> 
</StackPanel> 
</Window> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button. Click(object sender, RoutedEventArgs e) 


TextBlock tb = this.cp.ContentTemplate.FindName("textBlockName", this.cp) as TextBlock; 
MessageBox.Show(tb.Text); 


l/Student stu = this.cp.Content as Student; 
//MessageBox.Show(stu.Name); 


未 被 注释 的 代码 是 使 用 DataTemplate BJ FindName 77 1X 7X HX FH 
DataTemplate 生 成 的 控件 并 访问 其 属性 ， 被 注释 的 代码 是 直接 使 用 底层 
数据 。 显 然 ， 如 果 为 了 获取 Student 的 某 个 属性 ， 应 该 使 用 被 注释 的 代 
码 而 不 必 绕 到 表层 控件 上 来 ， 除 非 你 想得到 的 是 控件 的 长 度 、 宽 度 等 
与 业务 逻辑 无 天 的 纯 UI 属 性 。 


下面 再 来 看 一 个 复杂 的 例子 。DataTemplate 的 一 个 常用 之 处 
GridViewColumn 的 CellTemplate 属性 。 把 GridViewColumn 放置 
GridView 控件 里 束 可 以 生成 表格 了。 GridViewColumn 的 £A 
CellTemplate 是 使 用 TextBlock 只 读 性 地 显示 数据 ， 如 有 果 我 们 想 让 用 户 
修改 数据 或 者 使 用 CheckBox 显 示 bool 类 型 数据 的 话 束 需要 自 害 


DataTemplate ° 


还 是 先 定义 这 个 名 为 Student 的 类 : 


M 


«SR = HT RI 


public class Student 

| 
public int Id { get; set; } 
public string Name | get; set; } 
public string Skill { get; set; } 
public bool HasJob { get; set; } 


准备 数据 集合 、 呈 现 数据 的 工作 全 部 由 XAML 代 码 来 完成 : 


«Window x:Class-"WpfApplicationl. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:c-"clr-namespace:System.Collections;assembly-mscorlib" 
xmins:local-"clr-namespace: WpfApplication]" Title-"DataTemplate" Height-"300" 
Width-"300" Background-"Orange"* 

<Window. Resources> 

<|-- 数 据 集 合 --> 

«c:ArrayList x:Key-"stuList" 
«]ocal:Student Id="1" Name-"Timoty Liu" Skill-"WPF" HasJob-"True" /> 
«]ocal:Student Id-"2" Name-"Tom Chang" Skill-"BI/SQL" HasJob-"True" /> 
«]ocal:Student Id-"3" Name-"Guan Chong" Skill-" Writing" HasJob-"False" /> 
«]ocal:Student Id-"4" Name-"Shanshan" Skill="C#/Java" HasJob-"False" /> 
«]ocal:Student Id-"5" Name-"Pingping Zhang" Skill-" Writing" HasJob-"False" /> 
«]ocal:Student Id-"6" Name-"Kenny Tian" Skill-" ASP.NET" HasJob-"False" /> 

<lc:ArrayList> 

<|--DataTemplates--> 

<DataTemplate x:Key="nameDT"> 
«TextBox x:Name="textBoxName" Text-" [Binding Name}" /> 

</DataTemplate> 


«DataTemplate x:Key-"skillDT" 
«TextBox x:Name-"textBoxSkill" Text-" {Binding Skill}" /> 
«/DataTemplate? 
«DataTemplate x: Key-"hjDT" 
«CheckBox x:Name-"checkBoxJob" IsChecked-" (Binding HasJob]" /> 
«[DataTemplate? 
«Window.Resources? 
<!-- 主 体 布局 --> 
«Grid Margin="5"> 
«ListView x:Name="listViewStudent" ItemsSource="{StaticResource stuList] "> 
«ListView.View? 
«GridView? 
«GridViewColumn Header-" ID" DisplayMemberBinding-" | Binding dj" /> 
«GridViewColumn Header" 4" Cell Templatez"[StaticResource nameDT)]" /> 
«GridViewColumn Header=" 技 术 " CellTemplatez"(StaticResource skillDT]" /> 
«GridViewColumn Header-" C. T. fF" CellTemplatez" (StaticResource hjDT)" /> 
«[GridView? 
«[ListView. View? 
«[ListView? 
</Grid> 
</Window> 


程序 的 运行 效果 如 图 11-23 所 示 。 
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图 11-23 ”运行 效果 


然后 ， 我 们 为 显示 姓名 的 TextBox 添 加 GotFocus 事 件 的 处 理 器 : 


«DataTemplate x:Key-"nameDT" 
«TextBox x:Name-"textBoxName" Text-" [Binding Name}" GotFocus-"TextBoxName GotFocus" /> 


«/DataTemplate? 


因为 我 们 是 在 DataTemplate 里 添加 事件 处 理 器 ， 所 以 界面 上 任何 一 个 由 
此 DataTemplate 生成 的 TextBox 都 会 在 获得 焦点 时 调用 
TextBoxName_GotFocus 这 个 事件 处 理 器 。TextBoxName_GotFocus 的 代 
码 如 下 : 


private void TextBoxName GotFocus(object sender, RoutedEventArgs e) 

í 
JI 访问 业务 罗 辑 数据 
TextBoxtb=e.OriginalSource as TextBox; — / 获取 事件 发 起 的 源头 
ContentPresenter cp = tb.TemplatedParent as ContentPresenter; — // 获取 模板 目标 
Student stu = cp.Content as Student; I| 获取 业务 逻辑 数据 
this,listViewStudent,SelectedItem =stu; — / W ListView 的 选中 项 


Il 访问 界面 元 素 

ListViewItem lvi = this.list ViewStudent. 
ItemContainerGenerator.ContainerFromItem(stu) as ListViewItem; 

CheckBox chb = this.FindVisualChild«CheckBox^(lvi); 

MessageBox.Show(chb.Name); 


private ChildType FindVisualChild«Child Type» (DependencyObject obj) 
where ChildType : DependencyObject 


for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++) 
| 
DependencyObject child = VisualTreeHelper.GetChild(obj, i); 
if (child != null && child is ChildType) 
return child as Child Type; 
else 
| 
ChildType childOfChild = FindVisualChild«ChildType(child); 
if (childOfChild != null) 
return childOfChild; 


| 


return null; 


当 使 用 GridView 作 为 ListView 的 View 属 性 时 ， 如 果 某 一 列 使 用 TextBox 
作为 CellTemplate， 那 么 即使 这 列 中 的 TextBox 被 鼠标 单 击 并 获得 了 焦点 
ListView 也 不 会 把 此 项 作为 目 己 的 Selectedltem » Pr DA, 
TextBoxName_GotFocus 的 前 半 部 分 加 是 移 获 得 事件 的 最 初 源头 

( TextBox) ， 然 后 沿 UI 元 素 树 上 溯 到 DataTemplate 的 目标 控件 
| (ContentPresenter) 并 获取 它 的 内 容 ， 它 的 内 容 一 定 是 一 个 Student 实 
列 。 


TextBoxName_GotFocus 的 后 半 部 分 则 借助 VisualTreeHelper 类 检索 由 
DataTemplate 生 成 的 控件 。 前 面 说 过 ， 每 个 ItemsControl 的 派生 类 (如 
ListBox ^ ComboBox ^ ListView) 都 具有 上 自己 独特 的 条 目 容 器 ， 使 用 
ItemContainerGenerator.ContainerFromItem 77 7; M B& 3X f £J2 783 TE EE 
目 数 据 的 容器 ， 本 例 中 是 一 个 包装 着 Student 对 象 的 ListViewItem ( 注 
意 : 此 ListViewItem 对象 的 Content 也 是 Student 对 象 ) 。 可 以 把 这 个 
ListViewItem 探 件 视 为 一 棵 子 树 的 根 ， 使 用 VisualTreeHelper 类 就 能 遍历 
它 的 各 个 结 点 。 本 例 中 是 把 遇 历 算法 封 靶 在 了 FindVisualChild 范 型 方法 
里 o 


运行 程序 ， 并 单 击 某 个 显示 姓名 的 TextBox， 效 果 如 图 11-24 所 示 。 


8 ' DataTemplate 
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图 11-24 ”运行 效果 


由 本 例 可 以 看 出 ， 无 论 是 从 事件 源头 “目下 而 上 ”地 找 ， 还 是 使 用 
ItemContainerGenerator. ContainerFromItem 方 法 找到 条 目 容 器 再 “上 自 上 而 
下 ”地 找 ， 总 之 ， 找 到 业务 逻辑 数据 (Student 实 例 ) 并 不 难 ， 而 工作 中 
大 多 数 时候 是 操作 业务 逻辑 数据 。 如 果真 的 要 寻找 由 DataTemplate 生 成 
的 控件 ， 对 于 结构 简单 的 控件 ， 可 以 使 用 DataTemplate 对 和 象 的 FindName 
方法 ;对 于 结构 复杂 的 控件 ， 则 需要 借助 VisualTreeHelper 来 实现 。 


11.5 深入浅出 话 Style 


Style FIRME KE ` FER” o 和 拿 人 来 举例 ， 人 的 风格 是 指 静 态 外 
观 和 行为 举止 。 同 样 一 个 人 ， 如 采 留 平 尖 、 罕 上 足球 队 的 队 服 、 脚 器 
战 靳 ， 看 上 去 束 感 觉 他 是 一 名 叱 喧 球 场 的 运动 员 ; 如 果 让 他 换 上 一 身 
FEKAR ` FEKE, 再 擒 上 一 个 公文 包 ， 看 上 去 就 是 一 位 商务 人 
E; 如 果 让 他 梳 起 爆炸 头 、 戴 上 墨镜 、 打 几 个 耳 孔 再 穿 上 一 身 肥 大 的 
休 亲 又， 活脱 脱 一 个 非 主 流 形象 。 这 些 吏 是 静态 外 观 风 格 ， 是 通过 改 
变 一 些 属性 值 的 次 配 来 实现 的 。 除 了 从 静态 外 观 来 判断 一 个 人 的 风 
格 ， 我 们 还 会 观察 他 的 行为 特点 。 比 如 遇 到 困难 时 ， 有 些 人 很 乐观 、 
照样 谈笑风生 ， 有 些 人 很 谨 愤 、 仔 细 分 析 问 题 ， 有 些 人 会 很 悲观 、 成 
天 唉 声 叹 气 ， 这 束 是 行为 风格 ,行为 风格 是 由 对 外 界 刺激 的 响应 体现 
出 来 的 。 说 到 这 儿 ， 大 家 一 定 能 想到 一 种 职业 一 一 演员 。 演 员 殉 是 靠 
调整 目 己 的 静 仿 和 行为 风格 来 师 演 各 种 角色 的 。 


如 果 把 WPF 窗 体 看 作 一 个 舞台 ， 那 么 寄 体 上 的 控件 就 是 一 个 个 演员 ， 
它们 的 职责 就 是 在 用 户 界面 上 按照 业务 逻辑 的 需要 扮演 上 自己 的 角色 。 
为 了 让 同一 种 控件 能 担当 起 不 同 的 和 角色， 程序 员 就 要 为 它们 设计 多 种 
外 观 样式 和 行为 动作 ， 这 就 是 Style。 构成 Style 最 重要 的 两 种 元 素 是 
Setter 和 Trigger，Setter 类 帮助 我 们 设置 控件 的 静态 外 观 风 格 ，Trigger 类 
则 帮助 我 们 设置 控件 的 行为 风格 。 


11.5.1 ”Style 中 的 Setter 
Setter， 设 置 咽 。 什 么 的 设置 器 呢 ? 属性 值 的 。 我 们 给 属性 赋值 的 时 候 


一 般 都 采用 “属性 名 = 属性 值 ” 的 形式 。Setter 类 的 Property 属 性 用 来 指明 
想 为 目标 的 哪个 属性 赋值 ，Setter 类 的 Value 属 性 则 是 你 提供 的 属性 


下 面 的 例子 中 在 Window 的 资源 词典 中 放置 一 个 针对 TextBlock 的 Style， 
Style FH [ii H Æ F Setter? i% XE TextBlock BJ — £5 Ei E, 3 FERRE P SJ 


TextBlock 就 会 具有 统一 的 风格 ， 除 非 你 使 用 {x:Null} 显 示 地 清空 Style ° 


XAML 代 码 如 下 : 


«Window x:Class-"WpfApplicationl. Window |" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Style" 
Height-"1 32" Width-"300"» 

«Window.Resources? 
«Style TargetType=" TextBlock"» 
«Style.Setters» 
«Setter Propertyz"FontSize" Valuez"24" /> 
«Setter Propertyz" TextDecorations" Valuez "Underline" /> 
«Setter Propertyz"FontStyle" Valuez"Italic" /> 
«JStyle.Setters» 
Style» 
«Window.Resources? 
«StackPanel Margin-"5"» 
«TextBlock Text-"Hello WPF!" /» 
<TextBlock Text-"This is a sample for Style!" /> 
<TextBlock Text-"by Tim 2009.12.23" Stylez" [x:Null]" /> 
«/StackPanel^ 
</Window> 


因为 Style 的 内 容 属性 是 Setters， 所 以 我 们 可 以 直接 在 <Style> 标 签 的 内 
容 区 域 写 Setter。 上 面 的 代码 可 以 简化 如 下 : 


«Style TargetType="TextBlock"> 
«Setter Property-"FontSize" Value="24" /> 
«Setter Property="TextDecorations" Value="Underline" /> 
«Setter Property-"FontStyle" Value-"Italic" /> 

</Style> 


运行 效果 如 图 11-25 所 示 。 
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图 11-25 “运行 效果 


根据 上 面 这 个 例子 我 们 可 以 推 知 ， 如 有 果 想 设置 控件 的 ControlTemplate， 
只 需要 把 Setter 的 Property 设 为 Template 并 为 Value 提 供 一 个 
ControlTemplate 对 象 即 可 。 


11.5.2 Style 中 的 Trigger 


Trigger， 触 发 器 ， 即 当 某 些 条 件 满足 时 会 触发 一 个 行为 比如 某 些 值 
的 变化 或 动画 的 发 生 等 ) 。 触 发 器 比较 像 事 件 。 事 件 一 般 是 由 用 户 操 
作 触 发 的 ， 而 触发 絮 除 了 有 事件 触发 型 的 EventTrigger 外 还 有 数据 变化 
fh 发 型 的 Trigger/DataTrigger 及 多 条 件 触 发 型 的 
MultiTrigger/MultiDataTrigger 等 。 


1. 基本 Trigger 


Trigger 类 是 最 基本 的 触发 器 。 类 似 于 Setter，Trigger 也 有 Property 和 
Value 这 两 个 属性 ，Property 是 Trigger 关 注 的 属性 名 称 ，Value 是 触发 条 
件 。Trigger 类 还 有 一 个 Setters 属 性 ， 此 属性 值 是 一 组 Setter， 一 旦 触发 
条 件 被 满足 ， 这 组 Setter 的 “属性 一 值 ? 束 会 被 应 用 ， 触 发 条 件 不 再 满足 
后 ， 各 属性 值 会 被 还 原 。 


下 面 这 个 例子 中 包含 一 个 针对 CheckBox 的 Style, 24 CheckBox 的 
IsChecked 属 性 为 true 的 时 候 前 景色 和 字体 会 改变 。XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Trigger" 
Height-"130" Width-"300"» 

«Window.Resources? 
«Style Target Type-"CheckBox" 
«Style Triggers? 
«Trigger Propertyz"IsChecked" Valuez"true"» 
«Trigger.Setters» 
«Setter Propertyz"FontSize" Valuez"20" /> 
«Setter Propertyz"Foreground" Valuez "Orange" /> 
«JTrigger.Setters» 
«[Trigger» 
«JStyle.Triggers» 
«Style» 
</Window. Resources> 
«StackPanel» 
«CheckBox Content=" 悄 悄 的 我 走 了 " Margin-"" /» 
«CheckBox Content=" 正 如 我 悄悄 的 来 " Margin-"5,0" /» 
<CheckBox Content=" 我 挥 一 挥 农 袖 " Margin-"5" /» 
«CheckBox Content=" 不 带 走 一 片 云彩 " Margin="5,0" /> 
</StackPanel> 
</Window> 


Jj Triggers ^^ Æ Style 的 内 容 属 性 ， 所 以 <Style.Triggers>... 
</Style.Triggers> 这 层 标 签 不 能 省 略 ， 但 Trigger 的 Setters 属 性 是 Trigger 的 
内 容 属性 ， 所 以 <Trigger.Setters>...</Trigger.Setters> 这 层 标 签 是 可 以 省 


略 的 ， 以 上 代码 可 以 简化 为 : 


«Trigger Property="IsChecked" Value="true"> 
<Setter Property="FontSize" Value="20" /> 
«Setter Property="Foreground" Value-"Orange" /> 
</Trigger> 


运行 效果 如 图 11-26 所 示 。 


[| 悄悄 的 我 走 了 


图 正如 我 愉 愉 的 来 


D RFE 
加 不 带 走 一 片 云彩 


图 11-26 ”运行 效果 
2. MultiTrigger 


MultiTrigger 是 个 容易 让 人 误解 的 名 字 ， 会 让 人 以 为 是 多 个 Trigger 集 成 
在 一 起 ， 实 际 上 叫 MultiConditionTrigger 更 合适 ， 因 为 必须 多 个 条 件 同 
时 成 立时 才 会 被 触发 。MultiTrigger 比 Trigger 多 了 一 个 Conditions 属 性 ， 
需要 同时 成 立 的 条 件 就 存储 在 这 个 集合 中 。 


让 我 们 稍微 改动 一 下 上 面 的 例子 ， 有 要求 同时 满足 CheckBox 被 选中 且 
Content 为 “正如 我 悄悄 的 来 ?时 才 会 被 触发 。 XAML 代 码 如 下 ( 仪 Style 


部 分 ) 


«Style Target Type-" CheckBox"» 
<Style, Triggers> 
<MultiTrigger> 
«MultiTrigger.Conditions» 
«Condition Propertyz"IsChecked" Valuez"true" /> 
«Condition Propertyz" Content" Value=" 正 如 我 悄悄 的 来 "人 > 
«IMultiTrigger.Conditions» 
«MultiTrigger.Setters? 
«Setter Property-"FontSize" Value="20" /> 
«Setter Property-"Foreground" Value-"Orange" /> 
«/MultiTrigger.Setters? 
«/MultiTrigger» 
</Style, Triggers> 
</Style> 


运行 效果 如 图 11-27 所 示 。 
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图 11-27 运行 效果 
3. 由 数据 触发 的 DataTrigger 


程序 中 经 常会 过 到 基于 数据 执行 某 些 判 断 情 况 ， 遇 到 这 种 情况 时 我 们 
可 以 考虑 使 用 DataTrigger 。DataTrigger 对 象 的 Binding 属 性 会 把 数据 源 
2 ess — HŽ% BJ [& 5j Value jS PE — $t, DataTrigger EN $3 fi 


下 面 例子 中 ， 当 TextBox 的 Text 长 度 小 于 7 个 字符 时 其 Border 会 保持 红 
色 。XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication]. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"DataTrigger" 
xmins:local-"clr-namespace:WpfApplication]" Height" 130" Width-"300" 

«Window Resources 
«local: L2BConverter x:Keyz"cvtr" /> 
«Style TargetType-" TextBox"» 
«Style. Trigger? 
«DataTrigger 
Binding-"(Binding RelativeSourcez[x:Static RelativeSource.Self}, PathzText.Length, 
Converterz(StaticResource cvtr]]" 
Valuez"false"» 
«Setter Propertyz"BorderBrush" Valuez"Red" /> 
«Setter Propertyz"BorderThickness" Valuez"1" /> 
«IDataTrigger» 
«/Style.Triggers? 
«Style» 
«N'indow.Resources? 
«StackPanel^ 
«TextBox Margin-" 5" /» 
«TextBox Margin-" 5,0" /> 
«TextBox Margin-" 5" /> 
</StackPanel> 


</Window> 


这 个 例子 中 唯一 需要 解释 的 就 是 DataTrigger 的 Binding。 为 了 将 控件 目 
己 作 为 数据 产 ， 我 们 使 用 了 RelativeSource， 初 学 者 经 和 常 认为 “不 明确 指 
出 Source 的 值 Binding 就 会 将 控件 目 己 作为 数据 的 来 源 ”， 这 是 错误 的 ， 

为 不 明确 指出 Source 时 Binding 会 把 控件 的 DataContext 属 性 当 作 数据 
源 而 非 把 控件 自身 当 作 数据 源 。Binding 的 Path 被 设置 为 Text.Length， 即 


我 们 关注 的 是 字符 串 的 长 度 。 长 度 是 一 个 具体 的 数字 ， 如 何 基于 这 
长 度 值 做 判断 呢 ? 这 就 用 到 了 Converter ° 


public class L2BConverter : IValueConverter 


| 
public object Convert(object value, Type targetType, object parameter, Culturelnfo culture) 


| 
int textLength = (int)value; 
return textLength > 6 ? true : false; 


public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 


| 


throw new NotImplementedException(); 
i 


经 Converter 转 换 后 ， 长 度 值 会 转换 成 bool 类 型 值 。DataTrigger 的 Value 
被 设置 为 false， 也 束 是 说 当 TextBox 的 文本 长 度 小 于 7 时 DataTrigger 会 使 
用 目 己 的 一 组 Setter 把 TextBox 的 边框 设置 为 红色 。 


运行 效果 如 图 11-28 所 示 。 
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图 11-28 ”运行 效果 


多 数据 条 件 触发 的 MultiDataTrigger 


有 时 我 们 会 遇 到 要 求 多 个 数据 条 件 同时 满足 时 才能 触发 变化 的 需求 ， 
此 时 可 以 考虑 使 用 MultiDataTrigger。 比 如 有 这 样 一 个 需求 : 用 户 界 面 
上 使 用 ListBox 显 示 了 一 列 Student 数 据 ， 当 Student 对 象 同时 满足 ID 为 
2、Name 为 Tom 的 时 候 ， 条 目 就 高 亮 显 示 。 


示例 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"MultiDataTrigger" 
Height-"146" Width-"300"» 

«Window.Resources 
«Style TargetType-"ListBoxItem"» 
«1-58 Style 设置 DataTemplate--> 
«Setter Property-"ContentTemplate"» 
«Setter. Value» 
«DataTemplate? 
«StackPanel Orientation-" Horizontal" 
<TextBlock Text-" [Binding ID}" Width-"60" /> 
<TextBlock Text-" [Binding Name}" Width-"120" /> 
<TextBlock Text-" [Binding Age)" Width-"60" /> 
</StackPanel> 
</DataTemplate> 
</Setter. Value» 
</Setter> 
«t--MultiDataTrigger--^ 
<Style, Triggers> 
«MultiDataTrigger» 
«MultiDataTrigger.Conditions» 
«Condition Bindingz" (Binding Path=ID}" Valuez"2" /> 
«Condition Binding-" (Binding PathzName]" Valuez"Tom" /> 
«/MultiDataTrigger.Conditions» 
«MultiDataTrigger.Setters» 
«Setter Property=" Background" Valuez"Orange" /> 
«IMultiDataTrigger.Setters» 


«/MultiDataTrigger» 
«/Style.Triggers 
</Style> 
</Window. Resources> 
<StackPanel> 
<ListBox x:Name="listBoxStudent" Margin="5" /> 
</StackPanel> 


</Window> 


示例 的 C# 代 码 部 分 包括 声明 带 有 ID、Name、Age 属 性 的 Student 类 和 将 
一 个 List<Student> 实 例 赋值 给 ListBox 的 ItemsSource 必 性， 在 此 省 略 。 


程序 的 运行 效果 如 图 11-29 所 示 。 
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5. 由 事件 触发 的 EventTrigger 


图 11-29 ”运行 效果 


EventTrigger 是 触发 右 中 最 特殊 的 一 个 。 下 和 完 ， 它 不 是 由 属性 值 或 数据 
的 变化 来 触发 而 是 由 事件 来 触发 ， 其次， 被 触发 后 它 并 非 应 用 一 组 
Setter， 而 是 执行 一 段 动画 。 因 此 ，UI 层 的 动画 效果 往往 与 EventTrigger 


相关 联 。 
在 下 面 这 个 例子 中 创建 了 一 个 针对 Butto 


n 的 Style， 这 个 Style 包 含 两 个 


EventIrigger， 一 个 由 MouseEnter 事 件 触 发 ， 另 一 个 由 MouseLeave 事 件 


触发 。XAML 代 码 如 下 : 


«Window x:Class-"WpfApplication]. Window" 
xmlns-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"EventTrigger" 

Height-"240" Width="240"> 
«Window.Resources 
«Style Target Type" Button" 
«Style. Triggers? 
<|-- 也 标 进入 --> 
«EventTrigger RoutedEvent-" MouseEnter"» 
«BeginStoryboard^ 
«Storyboard^ 
«DoubleAnimation To-"150" Duration" 0:0:0.2" Storyboard, TargetProperty-" Width" /> 
«DoubleAnimation To-" 150" Duration-"0:0:0.2" Storyboard. TargetProperty-" Height" /> 
«/Storyboard^ 
</BeginStoryboard> 
</EventTrigger> 
<l- RRRA -> 
<EventTrigger RoutedEvent="MouseLeave"> 
<BeginStoryboard> 
<Storyboard> 
<DoubleAnimation Duration="0:0:0.2" Storyboard. TargetProperty="Width" /> 
<DoubleAnimation Duration="0:0:0,2" Storyboard. TargetProperty-" Height" /> 
</Storyboard> 
</BeginStoryboard> 
</EventTrigger> 
</Style.Triggers> 
</Style> 
</Window.Resources> 
«Canvas» 
«Button Width-"40" Height-"40" Content-"OK" /> 
«/ Canvas? 
</Window> 


无 需 任何 C# 代 码 ， 我 们 就 获得 了 如 图 11-30 所 示 的 效果 (界面 上 一 些 可 
展开 /收拢 的 工具 箱 或 菜单 就 是 使 用 这 种 EventTrigger 制 作 的 ) : 


8 ' EventTrigger Ear. 8 EventTrigger 


OK 


图 11-30 ”运行 效果 


至 此 各 种 触发 器 就 介绍 完了 ， 提 醒 大 家 注意 一 点 : 虽然 在 Style 中 大 量 
使 用 触发 亚 ， 但 触发 右 并 非 只 能 应 用 在 Style 中 一 一 各 种 Template 也 可 以 
HAE n 请 大 家 根据 设计 需要 决定 触发 器 放 在 Style 中 还 是 
Template 中 。 


12 
绘图 和 动画 


如 今 的 软件 市 场 ， 竞 搜 已 经 进入 了 日 热 化 的 阶段 ， 功 能 强 、 运 算 快 、 
界面 友好 、bug 少 、 价 格 低 都 已 经 成 为 必 备 条 件 。 这 还 不 算 完 ， 随 着 计 
算 机 的 多 媒体 功能 越 来 越 强 ， 软 件 的 界面 古 否 色彩 腕 丽 、 古 合 能 通过 
`3D 等 效果 是 否 吸引 用 户 的 眼球 也 已 成 为 衡量 软件 是 否 优秀 的 标 
(E o 


软件 项 目 成 功 与 否 的 三 个 要 素 是 : 资源 、 成 本 、 时 间 。 无 论 是 为 了 在 
竞争 中 保持 不 败 还 是 为 了 激发 起 用 户 对 软件 的 兴趣 ， 提 高 软件 界面 的 
美化 程度 、 恰 当地 将 动画 和 3D 等 效果 引入 应 用 程序 都 是 一 个 必然 趋 
势 。 然 而 ， 使 用 传统 的 桌面 应 用 程序 开发 工具 和 框架 (如 WinForm ` 
MFC、VB、Delphi 等 ) 进行 开发 时 ， 为 了 使 软件 的 界面 变 漂亮 、 加 入 
动画 或 者 3D 效 有 果 ， 边 际 成 本 会 非常 高 。 体 现在 : 


o 资源 消耗 增 大 : 需要 招聘 懂得 动画 和 3D 编 程 的 程序 员 ， 还 需要 更 多 
的 设计 师 ， 工 薪 和 沟通 成 本 随 之 上 升 。 


和 
B o 


: 成 本 增加 : 随 看 资源 消耗 的 增加 和 开发 时 间 的 拉 长 ， 成 本 必然 增 
He 


之 所 以 会 出 现 这 种 情况 ， 根 本 原因 在 于 传统 开发 工具 和 框架 并 没有 原 
生地 文 持 美化 用 户 界 面 、 向 应 用 程序 中 添加 动画 和 3D 等 效果 的 功能 。 
举 个 人 简单 例子 ， 当 用 户 提 出 布 望 把 TextBox 的 外 面 改 为 圆 角 时 ， 
WinForm 或 Delphi 程 序 员 只 能 通过 派生 新 类 并 在 底层 做 修改 的 方法 来 实 
现 。 类 似 的 用 户 需求 还 有 很 多 不 得 不 实现 ， 否 则 客户 会 怀疑 我 们 的 开 
发 能 力 ; 即使 实现 了 也 没有 什么 额外 的 经 济 效益 ， 因 为 在 客户 眼 里 这 
ERER REE 


WPF 的 推出 可 谓 对 证 下 药 、 专 门 解决 上 述 问 题 。 体 现在 : 


e XAML 语 言 针 对 的 是 界面 美化 问题 ， 可 以 让 设计 师 直 接 加 入 开发 团 
队 、 降低 沟 通 成 本 。 


e XAML 的 图 形 绘制 功能 非 第 强大 ， 可 以 轻易 绘制 出 复杂 的 图 标 、 图 
[Hj ° 


e WPF 支持“ 滤 镜 ”功能 ， 可 以 像 Photoshop 那 样 为 对 象 添 加 各 种 效果 。 


o WPF 原 生 文 持 动 画 开发 ， 无 论 是 设计 师 还 是 程序 员 ， 都 能 够 使 用 
XAML 或 C# 和 经 松 开 发 制作 出 炫丽 的 动画 效果 。 


e WPF 原 生 文 持 3D 效 果 ， 甚 至 可 以 将 其 他 3D 建 模 工 具 创建 的 模型 导 
入 进来 、 为 我 所 用 。 


E 


e Blend/E2j "| ANA LRAEWPFADLTESSSE, BEBETSBUAS T RARE 
EEH MAREP, 又 能 帮助 资深 开发 者 快速 建立 图 形 或 动画 的 原 


本 章 ， 我 们 由 静态 图 形 绘制 入 手 ， 进 而 学 习 动画 效果 的 制作 ， 最 后 领 
略 一 下 3D 设 置 的 风采 。 

121 WPF 绘 图 

与 传统 .NET 开 发 使 用 GDI+ 进 行 绘 图 不 同 ，WPF 拥 有 自己 的 一 套图 形 
API。 使 用 这 套 API 不 但 可 以 轻松 绘制 出 精美 的 图 形 ， 还 可 以 方便 地 为 
图 形 添 加 各 种 类 似 Photoshop 的 “ 滤 镜 效果 ”及 “变形 效果 ”。 本 节 我 们 就 
一 起 研究 WPF 图 形 API 的 绘图 、 戏 果 和 变形 等 功能 。 


在 开始 学 习 WPF 绘 图 之 前 请 先 观 察 下 面 一 组 图 片 (如 图 12-1 所 示 ) 。 


图 12-1 XAML 绘 制 的 矢量 图 效果 


显然 ， 这 组 图 片 是 矢量 图 (Vector Image) ， 无 论 怎样 放大 二 缩小 都 不 
会 出 现 锯 资 。 你 可 能 会 想 :“ 这 是 组 PNG 格 式 的 图 片 吗 ? ”答案 
是 : “No!” 这 组 图 片 完全 是 用 XAML 语 言 绘制 的 ! XAML 绘 图 本 身 就 是 
矢量 的 ， 而 且 文 持 各 式 各 样 的 填充 和 效果 ， 甚 至 还 可 以 添加 滤 镜 ， 这 
些 功能 丝毫 不 亚 于 Photoshop。 以 前 ， 使 用 Photoshop 制 作出 来 的 图 形 需 


要 程序 员 用 .NET 的 绘图 接口 进行 二 次 转换 后 才能 应 用 在 程序 里 ， 现 在 
好 了 ,直接 把 XAML 代 码 拿 来 用 就 可 以 了 。 


绘图 并 不 是 Visual Studio 的 强项 ， 这 些 漂 亮 的 XAML 矢 量 图 是 怎么 画 出 
来 的 呢 ? 答案 是 借助 Microsoft Expression Studio 中 的 Design 和 Blend 两 个 
工具 。Blend 我 们 已 经 介绍 过 ， 用 它 可 以 直接 绘制 XAML 图形 ; Design 
可 以 像 Photoshop 或 者 Fireworks 那 样 绘制 图 形 ， 再 由 设计 者 决定 导出 为 
PNG 或 XAML 格 式 。 虽 然 “ 唯 代码 派 * 的 程序 员 们 在 Visual Studio 里 一 行 
一 行 写 代码 也 能 把 复杂 图 形 以 非 可 视 化 的 形式 创建 出 来 ， 但 在 Design 或 
2 中 画 出 原型 再 在 Visual Studio 里 进行 细节 上 的 修饰 才 是 提高 效率 之 
jÉ 


聚 沙 成 塔 、 集 腑 成 表 ， 别 看 前 面 那 些 图 片 很 复杂 ， 但 都 是 由 有 限 的 几 
个 基本 图 形 组 成 的 。WPF 的 基本 图 形 包 括 以 下 几 个 (它们 都 是 Shape 类 
的 派生 类 ) : 

e Line: 直线 段 ， 可 以 设置 其 笔触 (Stroke) ° 

e Rectangle: 矩形 ， 既 有 笔触 ， 又 有 填充 (Fil e 

e Ellipse: 椭圆 ， 长 、 沉 相等 的 椭圆 即 为 正 融 ， 既 有 笔触 义 有 填充 。 

moron 多 边 形 ， 由 多 条 直线 段 围 成 的 闭合 区 域 ， 既 有 笔触 又 有 


AN 


o Polyline: 折线 (不 闭合 ) ， 由 多 条 首尾 相 接 的 直线 段 组 成 。 


e Path: 路 径 〈 闭 合 区 域 ) ， 基 本 图 形 中 功能 最 强大 的 一 个 ， 可 由 若 
干 直 线 、 圆 弧 、 贝 蹇 尔 曲 线 组 成 。 


1. 直线 


直线 是 最 简单 的 图 形 。 使 用 X1、Y1 两 个 属性 可 以 设置 它 的 起 点 坐标 ， 
X2、Y2 两 个 属性 则 用 来 设置 其 终点 坐标 。 控 制 起 点 二 终点 坐标 就 可 以 
实现 平行 、 交 错 等 效果 。Stroke (笔触 ) 属性 的 数据 类 型 是 Brush (il 
hU) ， 凡 是 Brush 的 派生 类 均 可 用 于 给 这 个 属性 赋值 。 因 为 WPF 提 供 了 
多 种 痢 变 色 画 刷 ， 所 以 画 直 线 也 可 以 画 出 渐变 效 末 。 同时，Line 的 一 些 
属性 还 帮助 我 们 画 出 虚线 以 及 控制 线段 终点 的 形状 。 下 面 的 例子 绿 合 
了 这 些 属性 : 


«Window x:Class-"WpfApplication]. Window1" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Lines" 

Height-"260" Width-"300"» 
Grid» 
«Line X1="10" Y1="20" X2-"260" Y2-"20" Stroke-"Red" StrokeThickness-" 10" /> 
«Line X1="10" Y1="40" X2-"260" Y2-"40" Stroke-"Orange" StrokeThickness-"6" /> 
«Line X1="10" Y1="60" X2-"260" Y2-"60" Stroke-"Green" StrokeThickness-"3" /> 
«Line X1="10" Y1="80" X2="260" Y2-"80" Stroke-"Purple" StrokeThickness-"2" /> 
«Line X1="10" Y1-"100" X2-"260" Y2-"100" Stroke-"Black" StrokeThickness-"1" /> 
«Line X1="10" Y 1="120" X2="260" Y2-"120" StrokeDashArray-"3" Stroke-"Black" 
StrokeThickness-"]" /> 
«Line X1="10" Y 1="140" X2="260" Y2-"140" StrokeDashArray-"5" Stroke-"Black" 
StrokeThickness-"]" /> 
«Line X1="10" Y1="160" X2-"260" Y2-"160" Stroke-"Black" StrokeEndLineCap- "Flat" 
StrokeThickness-"6" /» 
«Line X17" 10" Y 1="180" X27"260" Y2-"180" Stroke-"Black" 
StrokeEndLineCap-" Triangle" StrokeThickness-"8" /> 
«Line X1="10" Y1="200" X27"260" Y2-"200" StrokeEndLineCap-" Round" 
StrokeThickness-" 10» 
«Line.Stroke» 
«LinearGradientBrush EndPoint-"0,0.5" StartPoint-" 0.5" 
«GradientStop Color-"Blue" /> 
«GradientStop Offset="1" /> 
</LinearGradientBrush> 
</Line.Stroke> 
SLine> 
«Grid 
«/Nindow» 


实际 效果 如 图 12-2 所 示 。 


图 12-2 ”运行 效果 
注意 
点 需要 注意 ， 初 学 者 常 认为 绘图 一 定 要 在 Canvas 中 完成 〈 谁 叫 它 的 名 字 是 “画布 " 呢 ) ， 其 


有 
实 不 然 ， 绘 图 可 以 在 任何 一 种 布局 控件 中 完成 '，WPF 会 自动 根据 容器 的 不 同 计算 图 形 的 坐标 。 
日 常 工 作 中 ， 常 用 的 绘图 容器 是 Canvas 和 Grid 。 


2. ME 


矩形 由 笔触 (Stroke， 即 边线 ;和 填充 (Fil) 构成 。Stroke 属 性 的 设置 
与 Line 一 样 ，Fill 属 性 的 数据 类 型 是 Brush。Brush 是 个 抽象 类 ， 所 以 我 
们 不 可 能 拿 一 个 Brush 类 的 实例 为 F 刘 属性 赋值 而 只 能 用 Brush 派 生 类 的 
。WPF 的 绘图 系统 包含 非常 丰富 的 Brush 类 型 ， 和 常用 的 


e SolidColorBrush: 实心 画 刷 。 在 XAML 中 可 以 使 用 颜色 名 称 字 符 串 
(如 Red、Blue) 直接 赋值 。 


e LinearGradientBrush: Zy EW gm o AEREA A > t 
设 定 的 变化 点 进行 渐变 o 


e RadialGradientBrush: 径 癌 渐变 画 刷 。 色 彩 沿 半 径 的 方向 、 按 设 定 
的 变化 点 进行 渐变 ， 形 成 圆 形 填 充 。 


e ImageBrush: 使 用 图 片 (Image) 作为 填充 内 容 。 


e DrawingBrush: 使 用 矢量 图 (Vector) 和 位 图 (Bitmap) 作为 填充 
内 容 。 


e VisualBrush: WPF 中 的 每 个 控件 都 是 由 FrameworkElement 类 派生 来 
的 ， 而 FrameworkElement 义 是 由 Visual 类 派生 来 的 。Visual 意 为 “可 
视 ” 之 意 ， 每 个 控件 的 可 视 化 形象 就 可 以 通过 Visual 类 的 方法 获得 。 获 
得 这 个 可 视 化 的 形象 后 ， 我 们 可 以 用 这 个 形象 进行 填充 ， 这 就 是 
VisualBrush。 比 如 当 我 想 把 窗 体 上 的 某 个 控件 拖 搜 到 男 一 个 位 置 ， 当 
鼠标 松 开 之 前 需要 在 鼠标 指针 下 显现 一 个 控件 的 “幻影 ”， 这 个 “幻影 ?就 
是 用 VisualBrush 填 充 出 来 的 一 个 矩形 ， 并 让 矩形 捕捉 鼠标 的 位 置 、 随 
鼠标 移动 。 


下 面 是 使 用 各 种 画 刷 填充 矩形 的 综合 实例 。 


«Window x:Class-"WpfApplicationl. Window]" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Rectangle and Brush" Width-"600" Height-"390"» 

«Grid Margin-" 10"» 

«Grid. RowDefinitions» 
<RowDefinition Height-" 160" /> 
<RowDefinition Height-" 10" /> 
<RowDefinition Height-" 160" /> 

«/Grid.RowDefinitions» 

«Grid.ColumnDefinitions? 
«ColumnDefinition Width-" 180" /> 
«ColumnDefinition Width-" 10" /> 
«ColumnDefinition Width-" 80" /> 
«ColumnDefinition Width-" 10" /> 
«ColumnDefinition Width-" 180" /> 

«/Grid.ColumnDefinitions» 

<!- 实 心 填充 -> 

«Rectangle Grid.Column-"0" Grid.Row-"0" Stroke-"Black" Fill-"LightBlue" /> 


<|- 线 性 渐变 -> 
«Rectangle Grid.Column-"2" Grid.Row="0"> 
«Rectangle.Fill» 

«LinearGradientBrush StartPoint-"0,0" EndPoint="1,1"> 
«GradientStop Color-" £FFB6FSFI" Offset-"0" /> 
«GradientStop Color-"?FF0082BD" Offset-"0.25" /> 
«GradientStop Color="#FF95DEFF" Offset-"0.6" /> 
«GradientStop Color="#FF004F72" Offset-"l" /> 

«JLinearGradientBrush 

«/Rectangle.Fill» 

SRectangle> 

<-- 径 同 浙 变 --> 

«Rectangle Grid.Column-"4" Grid.Row="0"> 
«Rectangle.Fill» 

«RadialGradientBrush 
«GradientStop Color="#FFB6F8F1" Offset-"0" /> 
«GradientStop Color-" £FF0082BD" Offset-"0.25" /> 
«GradientStop Color-" £FF95DEFF" Offset-"0.75" /> 
«GradientStop Color-" £FF004F72" Offset-" 1.5" /> 

«[RadialGradientBrush? 

«fRectangle.Fill» 
</Rectangle> 
<!- 图 片 填充 -> 
«Rectangle Grid.Column-"0" Grid.Row-"2"» 

«Rectangle.Fill» 

«[mageBrush ImageSource-" 'logo.png" Viewport-"0,0,0.3,0. ] 5" 
TileMode-"Tile" /> 

«fRectangle.Fill» 

</Rectangle> 


«XR 
«Rectangle Grid.Column-"2" Grid.Row-"2"» 
«Rectangle.Fill» 

«DrawingBrush Viewport-"0,0,0.2,0.2" TileMode-"Tile"» 

«DrawingBrush.Drawing? 
«GeometryDrawing Brush" LightBlue"» 
«GeometryDrawing.Geometry 
«EllipseGeometry RadiusX-" 10" RadiusY-"10" /> 
«/GeometryDrawing.Geometry 
«/GeometryDrawing? 
«/DrawingBrush.Drawing? 
«[DrawingBrush» 
«/Rectangle.Fill» 
«Rectangle? 
<!- 无 填充 ， 用 线性 渐变 填充 边线 --> 
«Rectangle Grid.Column-"4" Grid.Row-"2" StrokeThickness="10"> 
«Rectangle.Stroke» 

«LinearGradientBrush StartPoint-"0,0" EndPoint-" 1,1" 
«GradientStop Color-" White" Offset-"0.3" /> 
«GradientStop Color-"Blue" Offset-"]" /> 

«JLinearGradientBrush? 

«[Rectangle.Stroke» 
</Rectangle> 
</Grid> 
</Window> 


运行 效 末 如 图 12-3 所 示 。 


E` Rectangle and Brush 
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图 12-3 ”运行 效果 


在 使 用 画 刷 的 时 候 ， 建 议 先 在 Blend 里 绘制 出 大 致 效 果然 后 再 在 Visual 
Studio 里 进行 微调 。 比 如 ， 使 用 Blend 可 以 快速 绘制 出 如 下 线性 渐变 ; 


«LinearGradientBrush EndPoint="0.995,0.997" StartPoint="0.003,0.006"> 
«GradientStop Color="#FFB6F8F1" Offset-"0" /> 
«GradientStop Color-" £FF004F72" Offset-"1" /> 
«GradientStop Color="#FF0082BD" Offset-"0.274" /> 
«GradientStop Color="#FF95DEFF" Offset-"0.665" /> 
«/LinearGradientBrush 


但 Blend 生 成 的 代码 质量 并 不 高 、 可 读 性 也 比较 差 一 一 数字 过 分 精确 、 
排列 题 三 倒 四 ， 所 以 我 们 需要 进行 调整 。 调 整 后 的 代码 如 下 : 


«LinearGradientBrush StartPoint-"0,0" EndPoint="1,1"> 
«GradientStop Color="#FFB6F8F1" Offset-"0" /> 
«GradientStop Color-"4FF0082BD" Offset-"0.3" /> 
«GradientStop Color-"4FF9SDEFF" Offset-"0.7" /> 
«GradientStop Color-"4FF004F72" Offset-"]" /> 

«/LinearGradientBrush» 


接 下 来 让 我 们 看 一 个 VisualBrush 的 例子 。 为 了 简单 起 见 ， 目 标 控件 是 
实际 工作 中 换 成 复杂 控件 的 效果 也 一 样 。 程 序 的 XAML 代 
马 如 下 : 


«Window x:Class-"WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"VisualBrush" 
Height" 300" Width-"400" Background-"Orange" 

«Grid Margin" 10"» 
«Grid.ColumnDefinitions? 
«ColumnDefinition Width-" 160" > 
«ColumnDefinition Width-"*" /» 
«ColumnDefinition Width-" 160" /> 
«/Grid.ColumnDefinitions? 
«StackPanel x:Name-"stackPanelLeft" Background-" White" 
«Button x:Name-"realButton" Content-"OK" Height-"40" /> 
</StackPanel> 
«Button Content=">>>" Grid,Column="]" Margin="$,0" Click-"CloneVisual" /> 
«StackPanel x:Name="stackPanelRight" Background" White" Grid.Column-"?" /» 
</Grid> 
</Window> 


中 间 Button 的 Click 事 件 处 理 絮 代码 如 下 : 


double o = 1.0; // 不 透明 度 计数 器 
private void CloneVisual(object sender, RoutedEventArgs e) 


i 
VisualBrush vBrush = new VisualBrush(this.realButton); 


Rectangle rect = new Rectangle(); 
rect. Width = realButton.Actual Width; 
rect.Height = realButton.ActualHeight; 
rect.Fill = vBrush; 

rect.Opacity = 0; 

0-702; 


this.stackPanelRight.Children.Add(rect); 


运行 效 末 如 图 12-4 所 示 。 


E~ VisualBrush 


图 12-4 ”运行 效果 


3. 椭圆 


椭圆 也 是 一 种 常用 的 几何 图 形 ， 它 的 使 用 方法 与 矩形 没有 什么 区 别 。 
下 面 的 例子 是 绘制 一 个 球体 ， 球 体 的 轮廓 是 正 圆 (Circle) ，Width 与 
Height 相 等 的 椭圆 即 是 正 圆 ， 球体 的 光影 效果 使 用 径 同 渐变 实现 。 
XAML 代 码 如下: 


«Window X'Class="WpfApplicationl.Windowl" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Ellipse" 
Height-"200" Width-"200"» 


«Grid» 
«Ellipse Stroke-"Gray" Width-" 140" Height-" 140" Cursor-"Hand" ToolTip-"A Ball"> 
«Ellipse.Fill» 
«RadialGradientBrush GradientOrigin-"0.2,0.8" RadiusX-"0.75" RadiusY-"0.75"» 
«RadialGradientBrush.RelativeTransform 
«TransformGroup» 
«RotateTransform Angle-"90" CenterX-"0.5" CenterY "0.5" /> 
«TranslateTransform /> 
«/TransformGroup^ 
«/RadialGradientBrush.RelativeTransform» 
«GradientStop Color-" 4FFFFFFFF" Offset="0" /> 
«GradientStop Color-" 4FF444444" Offset-"0.66" /> 
«GradientStop Color-"4FF999999" Offset="1" > 
«[RadialGradientBrush? 
«/Ellipse.Fill» 
«[Ellipse» 
</Grid> 
</Window> 


运行 效果 如 图 12-5 所 示 。 


E” Ellipse 


图 12-5 “运行 效果 


与 前 面 提 到 的 一 样 ， 椭 圆 的 绘制 和 色彩 填充 都 是 在 Blend 里 完成 的 ， 在 
ra (包括 规整 数值 、 调 整 顺序 和 去 掉 无 


4 路径 


路 径 (Path) 可 以 说 是 WPF 绘 图 中 最 强大 的 工具 ， 一 来 是 因为 它 完全 可 
以 末代 其 他 几 种 图 形 ， 二 来 它 可 以 将 直线 、 圆 弧 、 贝 塞 尔 曲线 等 基本 
元 素 结合 进来 ， 形 成 更 复杂 的 图 形 。 路 径 最 重要 的 一 个 属性 是 Data， 
Data 的 数据 类 型 是 Geometry (几何 图 形 ) ， 我 们 正 是 使 用 这 个 属性 将 
一 些 基本 的 线段 拼接 起 来 、 形 成 复杂 的 图 形 。 


为 Data 属 性 赋值 的 语法 有 两 种 : 一 种 是 标签 式 的 标准 语法 ， 另 一 种 是 
专门 用 于 绘制 几何 图 形 的 “路 径 标记 语法 ”。 本 小 节 我 们 借助 标准 语法 
p enc 下 一 小 地 我 们 将 学 习 绘 制 几何 图 形 的 路 径 标记 语 
y o 


想 要 使 用 Path 绘 制图 形 ， 首 先 要 知道 几何 图 形 数据 是 如 何 组 合 在 Data 属 
性 中 的 。Path 的 Data 属 性 是 Geometry 类 ， 但 Geometry 类 是 个 抽象 类 ， 所 
以 我 们 不 可 能 在 XAML 中 直接 使 用 <Geometry> 标 签 。 


<!- 不 可 能 出 现 -> 
«Path» 


«Geometry? 


«/Geometry^ 
</Path> 


我 们 可 以 使 用 的 是 Geometry 的 子 类 。Geometry 的 子 类 包括 : 

e LineGeometry: 直线 几何 图 形 。 

e RectangleGeometry: EJE JLI EIJE ° 

e EllipseGeometry: 椭圆 几何 图 形 。 

e PathGeometry: 路 径 几 何 图 形 。 

e StreamGeometry: PathGeometryfl'J jtm 2E fV ii, A cfrBinding ` 
动画 等 功能 。 

e CombinedGeometry: 由 多 个 基本 几何 图 形 联合 在 一 起 ， 形 成 的 单一 
几何 图 形 。 


a 由 多 个 基本 几何 图 形 组 合 在 一 起 ， 形 成 的 几何 图 
组 。 


可 能 让 大 家 比较 迷惑 的 是 : 前 面 已 经 见 过 Line、Rectangle、Ellipse 等 
类 ， 怎 么 现在 又 出 来 LineGeometry ^ RectangleGeometry ^ 
EllipseGeometry KIE? 他 们 的 区 别 在 于 前 面 介 绍 的 Line、Rectangle ` 
Ellipse 类 都 是 可 以 独立 存在 的 对 象 ， 而 这 些 *Geometry 类 只 能 用 于 结合 
成 其 他 几何 图 形 、 不 能 独立 存在 当 我 们 在 Blend 里 选中 一 组 独立 的 
几何 图 形 并 在 荣 单 里 执行 组 合 路 径 的 命令 时 ， 本 质 上 就 是 把 原来 独立 
的 Line、Rectangle、Ellipse 对 象 转 换 成 *Geometry 对 象 并 结合 成 一 个 新 
的 复杂 几何 图 形 。 


回 到 Path 的 Data 属 性 ， 下 面 这 个 例子 是 位 要 展示 各 个 儿 何 图 形 : 


«Window x:Class-"WpfApplication |. Window]" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" WindowStyle-"Tool Window" 
Title-" Geometry" Height-"350" Width-"340"» 

«Grid» 

«Grid.ColumnDefinitions? 
«ColumnDefinition Width-"160" /> 
«ColumnDefinition Width-" 160" /> 

«/Grid.ColumnDefinitions? 

«Grid.RowDefinitions» 
<RowDefinition Height-" 160" /> 
<RowDefinition Height-" 160" /> 

«fGrid.RowDefinitions» 

<|-- 直 线 --> 

«Path Stroke-"Blue" StrokeThickness-"2" Grid.Column-"0" Grid.Row-"0"» 
«Path.Data? 

«LineGeometry StartPoint-"20,20" EndPoint-" 40,140" > 

«[Path.Data» 

</Path> 

AE 

«Path Stroke-"Orange" Fill-" Yellow" Grid.Column-"|" Grid. Row-"0"» 
«Path.Data? 

«RectangleGeometry Rect-"20,20,120,120" RadiusX-"10" RadiusY-"10" /> 

«[Path.Data? 

«[Path? 


«t-il» 
«Path Stroke-"Green" Fill-"LawnGreen" Grid.Column-"0" Grid.Row-"1"» 
«Path.Data? 
«EllipseGeometry Center-" 80,80" RadiusX-"60" RadiusY-"40" /> 
</Path,Data> 
«[Path» 
< 一 自 定义 路 径 (最 为 重要 ) -> 
«Path Stroke="Yellow" Fill-"Orange" Grid.Column="1" Grid.Row="1"> 
«Path.Data» 
«PathGeometry? 
«PathGeometry.Figures? 
«PathFigure StartPoint-"25,140" IsClosed-"True"» 
«PathFigure.Segments 
«LineSegment Point-"20,40" /> 
«LineSegment Point-"40,110" /> 
«LineSegment Point-"50,20" /> 
«LineSegment Point-"80,110" /> 
«LineSegment Point-"1 10,20" /> 
«LineSegment Point-" 120,110" /> 
«LineSegment Point" | 40,40" /> 
«LineSegment Point-" 135,140" /> 
«JPathFigure.Segments? 
</PathFigure> 
</PathGeometry.Figures> 
</PathGeometry> 
</Path,Data> 
<[Path> 
</Grid> 
</Window> 


运行 效 末 如 图 12-6 所 示 。 


图 12-6 “运行 效果 


其 中 LineGeometry、RectangleGeometry 和 EllipseGeometry 都 比较 简单 ， 
现在 着 重 来 看 PathGeometry。 可 以 说 ，WPF 绘 图 的 重点 在 于 Path，Path 
的 重点 在 于 PathGeometry。PathGeometry 之 所 以 如 此 重要 是 因为 Path 的 
Figures 属 性 可 以 容纳 PathFigure 对 象 ， 而 PathFigure 的 Segments 属 性 又 可 
以 容纳 各 种 线段 用 于 结合 成 复杂 图 形 。XAML 代 码 结构 如 下 : 


«path» 
<Path.Data> 
<PathGeometry> 
«PathGeometry.Figures? 
<PathFigure> 
<PathFigure.Segments> 
<!-- 各 种 线段 -> 
«JPathFigure.Segments? 
</PathFigure> 
</PathGeometry,Figures> 
</PathGeometry> 
«JPath.Data? 
</Path> 


为 Figures 是 PathGeometry 的 默认 内 容 属性 、Segments 是 PathFigure 的 
默认 内 容 属性 ， 所 以 第 简化 为 这 样 : 


<Path> 
<Path.Data> 
«PathGeometry? 
«PathFigure? 
q- RA 
«JPathFigure» 
</PathGeometry> 
</Path.Data> 
</Path> 


本 耳 解 上 面 这 个 格式 之 后 ， 束 可 以 把 目光 集中 在 各 种 线段 上 。 它 们 是 : 
e LineSegment 直线 段 。 
e ArcSegment: 圆 弧 线段 。 


e BezierSegment: 三 次 方 贝 塞 尔 曲线 段 (默认 贝 塞 尔 曲 线束 是 指 三 次 
曲线 ， 所 以 Cubic 一 词 被 省 略 ) 。 


e  QuadraticBezierSegment: Z 7X7; V 3&/R Hl zz Ex. » 

e PolyLineSegment: 多 直线 段 。 

e PolyBezierSegment: 多 二 次 方 贝 塞 尔 曲 线段 。 

e PolyQuadraticBezierSegment: 多 二 次 方 贝 塞 尔 曲线 。 

在 绘制 这 些 线段 的 时 候 需 要 注意 ， 所 有 这 些 线段 都 是 没有 起 点 
(StartPoint) 的 ， 因 为 起 点 束 是 前 一 个 线段 的 终点 ， 而 第 一 个 线段 的 

起 点 则 是 PathFigure 的 StartPoint。 请 看 下 面 这 些 示 例 。 


LineSegment 最 为 简单 ， 只 需要 控制 它 的 Point (终点 ) 即 可 。 


«Window x:Class-" WpfApplication] .Window]" 
xmlns-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Segments" 
Height-"200" Width-"300"» 

«Grid VerticalAlignment-"Center" HorizontalAlignment-" Center" 
«Path Stroke-" Green" Fill-"LawnGreen" StrokeThickness-"2"» 
<Path,Data> 
<PathGeometry> 
«PathFigure IsClosed="True" StartPoint="0,0"> 
«LineSegment Pointz" 150,0" /> 
«LineSegment Pointz" 150,30" /> 
«LineSegment Pointz"90,30" /» 
«LineSegment Pointz"90,150" /> 
«LineSegment Pointz"60,150" /> 
«LineSegment Pointz" 60,30" /> 
«LineSegment Pointz"0,30" /> 
«JPathFigure» 
«JPathGeometry? 
</Path.Data> 
<[Path> 
</Grid> 
</Window> 


运行 效 末 如 图 12-7 所 示 。 


图 12-7 ”运行 效果 


ArcSegment 用 来 绘制 圆 弧 。Point 属 性 用 来 指明 圆 弧 连接 的 终点 ; E 
截取 自 椭圆 ，Size 属 性 即 是 完整 椭圆 的 横 轴 半径 和 纵 轴 半径 ; 
SweepDirection 属 性 指明 圆 缴 是 顺 时 针 方 向 还 是 逆 时 针 方 同 ， 如 果 椭 圆 
上 的 两 点 位 置 不 对 称 ， 那 么 这 两 点 间 的 圆 缴 就 会 分 为 大 弧 和 小 弧 ， 
IsLargeArc 属 性 用 于 指明 是 否 使 用 大 缴 去 连接 RotationAngle 属 性 用 来 
Te 。 如 图 12-8 所 示 是 对 几 个 属性 的 变化 做 了 详 
A 2 » : 


Point: 100,100 | Point: 100,100 | Point: 100,100 | 


Size; 5025 | Size; 50,25 | Size; 50/5 | 
SweepDirection: Clockwise | SweepDirection. Clockwise SweepDirection: Clockwise CEN | 
lsLargeArc: True | IsLargerc True | lsLargeArc, True | 

| | 

| LLL 


uA 


c 
c 
c» 


RotationAngle: RotationAngle: RotationAngle; 
Point: 100,100 Point: 150,100 


Site: 60,25 | St 50,25 
SweepDirection: Clockwise | SweepDrecton; Clockwise PARN 
| IsLargeArc; True 


| IeLargeArc: 


Point: 100,100 
Sie; 50,25 
SweepDirection; Clockwise 
lsLargeArc: True 


EJ 
ES 


rue 
RotationAngle: 


< 


RotationAngle: 45 |  RotationAngle: 0 
Point: 100,100 | Point: 100,100 | un men 
| Size; 50,25 
Size; 50,25 | Size: 50,60 Aaa din 
: | Sweepirection: Clockwise Ot 
SweepDirectlon, Clockwise | peii | p e 
lsLargeArc: True | rgeArc: True green 
RotationAngle: 90 | RotationAngle: 0 | 


图 12-8 ”ArcSegment 的 几 个 属性 变化 时 的 效果 对 比 
BezierSegment (三 次 方 贝 塞 尔 曲线 ) 由 4 个 点 决定 : 

(1) ÆA: 即 前 一 个 线段 的 终点 或 PathFigure 的 StartPoint ° 

(2) 终点: Point3 属 性 ， 即 曲线 的 终点 位 置 。 

(3) 两 个 控制 点 ，Point1 和 Point2 属 性 。 
粗略 地 说 ， 三 次 方 贝 塞 尔 曲 线 殉 是 由 起 点 出 发 走 同 Point1 的 方向 ， 绸 走 
回 Point2 的 方 问 ， 最 后 到 达 终 点 的 平 请 曲线 ， 有 具体 算法 请 查阅 维 基 百 
科 “ 贝 塞 尔 曲 线 ” 词 条 。 
如 下 为 XAML 代 码 表示 的 三 次 方 贝 塞 尔 曲线 ; 


«Path Stroke-" Black" StrokeThickness-"2" 
<Path.Data> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
«BezierSegment Pointl="250,0" Point2="50,200" Point3="300,200"/> 
</PathFigure> 
</PathGeometry> 
</Path.Data> 
</Path> 


其 显示 效果 如 图 12-9 所 示 。 


Í 


Point1 | 


Pointa | 


图 12-9 三 次 方 贝 塞 尔 曲 线 示例 


QuadraticBezierSegment 〈 二 次 方 贝 塞 尔 曲线 ) 与 BezierSegment 类 似 ， 
只 是 控制 点 由 两 个 减少 为 一 个 。 也 就 是 说 ，QuadraticBezierSegment 由 3 
个 点 决定 : 
(1) EA: 即 前 一 个 线段 的 终点 或 PathFigure 的 StartPoint ° 


(2) 终点 : Point2 属 性 ， 即 曲线 的 终点 位 置 。 


(3) 一 个 控制 点 : Pointl ° 


如 下 为 XAML 代 码 表示 的 二 次 方 贝 塞 尔 曲 线 : 


<Path Stroke="Black" StrokeThickness="2"> 
<Path.Data> 
<PathGeometry> 
<PathFigure StartPoint="0,200"> 
«QuadraticBezierSegment Pointl="150,-100" Point2="300,200"/> 
</PathFigure> 
</PathGeometry> 
«JPath.Data» 
</Path> 


其 显示 效果 如 图 12-10 所 示 。 


Point2 j 


图 12-10 ”二 次 方 贝 塞 尔 曲线 效果 


至 此 ， 人 简单 的 基本 路 径 就 介绍 完了 。 如 果 想 绘制 出 复 洒 的 图 画 来 ， 我 
们 要 做 的 仅仅 是 在 PathFigure 把 Segment 一 段 一 段 加 上 去 。 


GeometryGroup 也 是 Geometry 的 一 个 派生 类 ， 它 最 大 的 特点 是 可 以 将 一 
组 PathGeometry 组 合 在 一 起 。 如 下 面 的 例子 所 示 : 


«Path Stroke-"Black" Fill-"LightBlue" StrokeThickness-" 1" 
<Path.Data> 
<GeometryGroup> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="250,0" Point2-"50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="230,0" Point2="50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="210,0" Point2="50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="190,0" Point2-"50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
«BezierSegment Point1="170,0" Point27"50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="150,0" Point2="50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
«BezierSegment Point1="130,0" Point2-"50,200" Point3="300,200" > 
</PathFigure> 
</PathGeometry> 
</GeometryGroup> 
</Path.Data> 
</Path> 


运行 效果 如 图 12-11 所 示 。 


Segments 


图 12-11 用 GeometryGroup 将 一 组 PathGeometry 组 合 起 来 
5. 路 径 标 记 语法 


Path 是 如 此 之 强大 ， 可 以 让 我 们 随心 所 欲 地 绘制 图 形 ， 然 而 它 的 一 大 缺 
点 也 是 不 容 忽 视 的 ， 那 就 是 其 标签 式 语 法 的 烦琐 。 一 般 情 况 下 ， 复 杂 
图 形 (Path) 都 是 由 数 十 条 线段 连接 而 成 ， 按 照 标 签 式 语法 ， 每 条 线段 

(Segment) 是 一 个 标签 、 每 个 标签 占据 一 行 ， 一 个 图 形 就 要 占 去 几 十 
行 代 码 。 而 这 仅仅 是 一 个 图 形 ， 要 组 成 一 个 完整 的 图 画 又 往往 需要 十 
多 个 图 形 组 合 在 一 起 ， 有 可 能 占据 数 百 行 代码 ! 验 好 这 种 事情 没有 发 
生 ， 因 为 我 们 可 以 借助 专 供 WPF 绘 图 使 用 的 路 径 标 记 语 法 (Path 
Markup Syntax). 来 极 大 地 简化 Path 的 描述 。 


路 人 径 标 记 语 法 实际 上 就 是 各 种 线段 的 简 记 法 ， 比 如 ，<LineSegment 
Point="150,5" /> 可 以 简写 为 150,5”， 这 个 工 就 是 路 径 标记 语法 的 一 
个 “绘图 命令 ”。 不 仅 如 此 ， 路 径 标记 语法 还 增加 了 一 些 更 实用 的 绘图 
命令 ， 比 如 HH 用 来 画 水 平 直线 ，“H 180” 就 是 指 从 当前 点 画 一 条 水 平 直 
线 ， 终 点 的 横 坐 标 是 180 〈 你 不 需要 考虑 纵 坐 标 ， 它 与 当前 点 的 纵 坐 标 
一 致 ) 。 类 似 地 还 有 V 命 令 ， 用 来 画 竖 直 直 线 。 


使 用 路 径 标 记 语 法 绘图 时 一 般 分 三 步 : 移动 至 起 点 -绘图 -闭合 图 
形 ， 这 三 步 使 用 的 命 令 稍 有 差别 。 o 移动 到 起 点 使 用 的 是 移动 命令 ?ML 
AA EE RI RI ERA 会 图 命令 ， 包 括 L、H、V、A、C、Q 等 ， 下 面 会 逐一 介 
绍 ， 如 果 图 形 是 闭合 的 ， 需 要 使 用 “闭合 命令 ”Zz， 这 样 最 后 一 AAA 
终点 与 第 一 条 线段 的 起 点 间 会 连接 上 一 条 直线 段 。 


路 径 标记 语法 是 不 区 分 大 小 写 的 ， 所 以 A 与 a、H 与 h 都 是 等 价 的 。 在 路 

径 标记 语法 中 使 用 两 个 double 类 型 数值 来 表示 一 个 点 ， 第 一 个 值 表示 横 
jr (Kix) ， 第 二 个 值 表 示 纵 坐标 ( 常 记 为 y) ， 两 个 数值 既 可 
以 使 用 和 逗号 分 隔 Guy) 又 可 以 使 用 空格 分 隔 (xy) 。 由 于 路 径 标记 法 
语 中 使 用 空格 作为 两 个 点 之 间 的 分 隔 ， 为 了 避免 混 消 ， 建 议 使 用 喜 号 
作为 点 模 纵 坐标 的 分 隔 符 。 


如 表 12-1 所 示 是 党 用 路 径 标记 语法 的 总 结 。 
表 12-1 常用 路 径 标记 语法 的 总 结 


命令 |。 用途 m 对 应 标签 式 语法 
动 到 起 < 
P AEE | M gli M 1010 ie StartPoint= 移动 人 人 
始点 "0,0" 
L 给 制 直线 L 15030 «LineSegment Point- 绘图 命令 
"150,30" /> 
绘制 水 平 
H ER, H ABU |H 180 给 图 全 人 
直线 
绘制 紧 直 


A KMAR 


isnt RotationAngle-'45" 
y 旋转 角度 | A 180,80 45 1 1| 0 DETUR "TUM 
Wo IsLargeArc-"True 绘图 命令 
ROSE NU | 150,150 


递 时 针 终点 SweepDirection-"Clockwise" 


«ArcSegment Size-" 180,80" 


A X EN 


Point-" 150,150" /> 


$$ | Ri 语法 对 应 标 答 式 语法 | 分 类 
«BezierSegment 

c | 三 次 方 由 |C EBLA L| C2S00 50200 — | Pointl= "250,0" TTA 

塞 尔 曲线 | 控制 点 2 终点 | 300,200 Point2="50,200" TYTE 


Point3-"300,200" /> 


«QuadraticBezierSegment 


二 次 方 贝 多 制皮 1 | Q 150,-100 ; 
| Pointl="150,-100" 绘图 命令 


Q kc iyi "T np ^ 
sAN ETE EX, S A 3 
JEJ] 曲 X 局 00,200 Point2-"300.200"/» 


平滑 三 次 
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平滑 二 次 
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" M 0,0 L 40,80 «PathFigure lsClosed= — 
L^ IRI 35 83 S A 
Z 闭合 图 形 |Z L8040 Z "Tre" > RAIMA 


TE Exüüp 4B, SAUTPAT ü8 RIFI * SHHT 22 REIS ZRA NER 
曲线 ， 但 只 和 需要 给 出 一 个 控制 点 ， 这 个 控制 点 相当 于 普通 三 次 方 贝 塞 
尔 曲 线 的 第 二 个 控制 氮 ， 之 所 以 第 一 个 控制 点 省 略 不 写 是 因为 平滑 三 
次 方 贝 塞 尔 曲线 会 把 前 一 条 贝 塞 尔 曲 线 的 第 二 控制 点 以 起 点 为 对 称 中 
心 的 对 称 点 当 作 自 己 的 第 一 控制 点 (如 果 前 面 的 线段 不 是 贝 塞 尔 曲 
线 ， 则 第 一 控制 点 与 起 点 相同 ) 。 例 如 下 面 两 条 曲线 就 是 等 价 的 : 


«Path Stroke="Red" Data="M 0,0 C 30,0 70,100 100,100 S 170,0 200,0" > 
«Path Stroke-"Black" Data-"M 0,0 C 30,0 70,100 100,100 C 130,100 170,0 200,0" /> 


与 命令 相仿 ，T 命 令 用 于 绘制 平滑 二 次 方 贝 塞 尔 曲线 ， 绘 制 的 时 候 如 
条 前 面 的 线段 也 是 一 段 二 次 方 贝 蹇 尔 曲线 的 话 ，T 命 令 会 把 前 面 这 段 曲 
线 的 控制 点 以 起 点 为 对 称 中 心 的 对 称 点 当 作 自 己 的 控制 点 (如 果 前 面 
的 线段 不 是 二 次 方 贝 塞 尔 曲线 则 控制 点 与 起 点 相同 ) 。 下 面 两 条 曲线 


等 价 : 


«Path Stroke-"Red" Data-"M 0,200 Q 100,0 200,200 T 400,200" /> 


«Path Stroke-" Black" Data-"M 0,200 Q 100,0 200,200 Q 300,400 400,200" 
/> 


现在 我 们 就 可 以 使 用 路 径 标记 语法 来 绘图 了 ! 使 用 方法 是 把 这 些 命令 
串 起 来 、 形 成 一 个 字符 串 ， 然 后 赋值 给 Path 的 Data 属 性 。 使 用 Blend 绘 
图 时 ，Blend 会 目 动 使 用 路 径 标记 语法 来 记录 数据 而 不 是 使 用 代码 量 巨 
大 的 标签 式 语法 。 


6. 使 用 Path 剪 裁 界面 元 素 


实际 工作 中 经 常会 过 到 制作 不 规则 窗 体 或 控件 的 需求 ，WPF 在 这 方面 
做 了 民 好 的 文 持 ， 仅 需 使 寄 体 或 控件 的 Clip 属 性 就 可 以 轻松 做 到 。 


Clip 属 性 被 定义 在 UIElement 类 中 ， 因 此 WPF 窗 体 和 所 有 控件 、 图 形 都 
具有 这 个 属性 。Clip 属 性 的 数据 类 型 是 Geometry， 与 Path 的 Data 属 性 一 
致 。 因 此 ， 我 们 只 要 按 需 求 制作 好 特殊 形状 的 Path 并 把 Path 的 Data 属 性 
值 赋 给 目标 窗 体 、 控 件 或 其 他 图 形 ， 对 目标 的 前 切 就 完成 了 。 请 看 下 
面 这 个 不 规则 窗 体 的 例子 : 


«Window x:Class-"WpfApplication2. Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Width-"300" Height-"250" 
Background-" LawnGreen" AllowsTransparencyz "True" WindowStylez"None"» 

«Grid VerticalAlignment-"Center" HorizontalAlignment-" Center"? 
«Path Visibility-" Hidden" x:Name-"clipPath" 

Data-"M50.000001,0.5 = C77.338097,0.5 — 99,5.22.661905 — 99,5,50.000001  99.5,53.417262 
99.153721,56.753646 98.494339,59.975975.L98.07753,61.78191 100.14996,60.838246 C115.10204,54.228902.132.04643,50.5 
150,50.5.— 167.95357,50.5 — 184.89796,54.228902 — 199.85004,60.838246 — L201.92247,61.781907 —— 201.50566,59.975979 
C200.84628,56.753646 200.5,53.417262 200.5,50.000001 200.5,22.661905 222.66191,0.5 250,0.5 277.33809,0.5 299,5.22.661905 
299,5,50.000001 —299,5,77.338095 .277.33809,99.5 250,99.5 249.14569,99,.5 248.29642,99.478359  247,45273,99.435593 
L245.86905,99.315166 246.28394,99,955688 C254.71242,113.3457 259,5,128.69034 259,5,145 259,5,197.1909 210.47517,239.5 
150,239.5 — 89,524818239.5— 40.5,197.1909 — 40.499998,145 — 40,5,128.69034 —.4528758,113.3457 — 53.716058,99.955688 
L54.130958,99,315166 52.54726,99.435593 C51.703576,99.478359 50,854316,99.5 50.000001,99.5 22.661905,99.5 0,5,77.338095 
0.5,50.000001 0.5,22.661905 22.661905,0.5 50.000001,0.5 z" /> 

«Button VerticalAlignment-"Center" HorizontalAlignment-"Center" Width-"80" 

Height-"25" Name-"buttonClip" Click-"buttonClip Click">Clip</Button> 

</Grid> 


</Window> 


是 不 是 被 一 大 片 路 径 标 记 命令 摘 晤 了 ? 其 实 它 们 是 我 在 Blend 里 画 出 来 
ee 也 没 必 要 为 如 此 繁杂 的 数据 一 一 做 
简化 。 

如 果 想 让 一 个 窗 体 能 够 被 剪 切 ， 那 么 其 AllowsTransparency 必 须 设 为 
True， 这 个 属性 设 为 True 后 ，WindowStyle 属 性 必须 设 为 None。 


窗 体 中 Button 的 Click 事 件 处 理 器 如 下 : 


private void buttonClip Click(object sender, RoutedEventArgs e) 


| 
this.Clip = this.clipPath.Data; 


运行 程序 、 单 击 Clip 按 钮 ， 会 得 到 如 图 12-12 所 示 歼 果 。 


E) 


图 12-12 ”使 用 Path 剪 截 界 面 元 素 
原来 是 米 老鼠 的 剪影 哦 | 


虽然 任务 完成 了 ， 但 Blend 生 成 的 路 径 标 记 其 质量 实在 是 太 差 了 ， 这 是 
我 画 了 三 个 椭圆 然后 合并 路 径 所 产生 的 那么 多 数据 ， 让 我 们 优化 一 
下 。 实 际 上 ， 一 个 米 老鼠 的 剪影 用 4 个 A 命 令 就 能 搞定 ， 优 化 后 的 数据 
如 下 (运行 效果 不 变 ) : 


«Path Visibility="Hidden" x:Name-"clipPath" 
Data-"M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 155,100 Z" > 


12:2 图形 的 效果 与 滤 镜 


以 往 ， 令 程序 员 们 很 头疼 的 一 件 事 就 是 要 精确 实现 UI 设计 师 们 给 出 的 
样稿 。 有 些 时 候 程序 员 可 以 使 用 设计 师 提 供 的 图 厂 作 为 背景 或 者 贴 
图 ， 但 这 些 图 片 往往 是 位 图 而 非 拓 量 图 ， 所 以 当 应 用 了 这 些 图 片 的 窗 
体 或 控件 发 生 尺 寸 变 化 时 ， 图 片 经 常会 出 现 锯 人 次 、 马 赛 元 或 失真 等 情 

况 。 对 于 那些 对 用 户 体验 要 求 比较 高 的 软件 程序 员 就 不 能 直接 使 用 位 
图 了 ， 只 能 用 代码 来 实现 设计 师 的 设计 。 要 知道 ， 设 计 师 手 里 用 的 是 
Photoshop、Jllustrator、Fireworks 这 些 专业 设计 工具 ， 加 个 阴影 、 生 成 
个 发 光 歼 果 也 就 是 点 点 鼠标 的 事 儿 ， 同 样 的 效果 让 程序 员 用 C# 实 现 可 
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术 与 知识 ， 这 无 疑 增加 了 开发 的 难度 与 成 本 。 


WPF 的 出 现 可 谓 是 程序 员 们 的 福音 ， 因 为 不 但 像 阴影 、 发 光 这 种 简单 
效果 可 以 使 用 一 两 个 属性 实现 ， 束 连通 道 、 动 态 模糊 这 些 高 级 的 效果 
也 可 以 轻松 实现 。 同 时 ， 设 计 师 和 程序 员 还 可 以 像 为 Photoshop 开 发 滤 
锐 一 样 为 WPF 开 发 效 末 类 库 ， 届 时 只 要 把 类 库 引 用 到 项 目 中 束 可 以 使 
用 其 中 的 效果 了 (微软 的 官方 网 站 和 一 些 开 源 网 站 上 已 经 有 很 多 效果 
类 库 可 供 使 用 ) 。 


在 UIElement 类 的 成 员 中 你 可 以 找到 BitmapEffect 和 Effect 这 两 个 属性 ， 
这 两 个 属性 都 能 用 来 为 UI 元 素 添 加 效果 。 你 可 能 会 癌 : 为 做 同一 件 事 
准备 了 两 个 属性 ， 难 道 不 冲突 吗 ? 答案 是 : 的确 冲 突 。WPF 最 早 的 版 
本 里 只 有 BitmapEffect 这 个 属性 ， 这 个 属性 使 用 CPU 的 运算 能 力 为 UI 元 
素 添加 效果 ， 这 样 做 的 问题 是 效果 一 多 或 者 让 市 有 效果 的 UI 元 素 参 与 
动画 ， 程 序 的 性 能 会 因 CPU 资 源 被 大 量 占 用 而 大 幅 降 低 (要 么 响应 变 
慢 ， 要 么 刷新 或 动画 变 得 很 卡 ) 。 随 后 的 版 本 中 ， 微 软 决定 转 用 显卡 
GPU 的 运算 能 力 为 UI 元 素 添 加 效果 ， 于 是 添加 了 Effect 这 个 属性 。 这 样 
和 与 游戏 程序 一 
NRR ° 


为 有 Effect 属 性 代 检 BitmapEffect 属 性 ， 所 以 你 在 MSDN 文 档 里 可 以 看 
到 BitmapEffect 属 性 被 标记 为 “已 过 时 ”， 不 过 在 WPF 4.0 中 BitmapEffect 
仍然 可 以 使 用 ， 也 就 是 说 至 少 未 来 两 三 年 里 BitmapEffect 仍 然 可 用 。 下 
面 让 我 们 浅 党 如 何 使 用 这 两 种 效果 。 


12.2.1 ”简单 易 用 的 BitmapEffect 


BitmapEffect 属 性 定义 在 UIElement 类 中 ， 它 的 数据 类 型 是 BitmapEffect 

类 。BitmapEffect 是 一 个 抽象 类 ， 所 以 我 们 只 能 用 它 的 派生 类 实例 为 

UIElement 的 BitmapEffect 属 性 赋值 。BitmapEffect 类 的 派生 类 并 不 多 

E 生 的 界面 效果 并 不 是 很 丰富 ) ， 包 括 如 下 
|: 


e BevelBitmapEffect: NAAF ° 


e BitmapEffectGroup: 复合 效果 (可 以 把 多 个 BitmapEffect 组 合 在 一 
起 ) 。 


e BlurBitmapEffect: 模糊 效果 。 


è DropShadowBitmapEffec: 投影 效果 。 

e EmbossBitmapEffect 浮雕 效果 。 

e OuterGlowBitmapEffect: 外 发 光 效 果 。 

每 个 效 采 都 有 目 己 的 一 系列 属性 可 以 调整 ， 比 如 你 可 以 调整 投影 效 末 
的 投影 高 度 、 阴 影 深度 和 角度 ， 让 用 户 感觉 光 是 从 某 个 角度 投射 下 


来 ; 你 也 可 以 调整 外 发 光 歼 果 的 颜色 和 延展 距离 。 下 面 是 一 个 
DropShadowBitmapEffect 的 简单 例子 : 


«Grid» 
«Button Content-"Click Me" Grid.Column-"0" Grid.Row-"0" Margin-"20"» 
«Button.BitmapEffect 
«DropShadowBitmapEffect Direction-"-45" Opacity-"0.75" ShadowDepth-"7" /> 
</[Button.BitmapE ffect> 
</Button> 
</Grid> 


运行 效果 如 图 12-13 所 示 。 


8 ' MainWindow 


Click Me 


图 12-13 ”运行 效果 


对 于 每 个 BitmapEffect 的 派生 类 MSDN 文 档 都 有 相当 详细 的 记述 ， 请 大 
家 自行 查阅 。 


12[22 ”丰富 多 彩 的 Effect 


绘图 软件 Photoshop 能 够 大 获 成 功 的 一 个 重要 原因 就 古 它 的 插件 标准 是 
公开 的 ， 这 样 ， 众 多 第 三 方 公司 和 人 员 就 可 以 为 它 设计 各 种 各 样 的 插 
件 、 极 大 地 丰富 它 的 功能 一 一 众人 拾 柴火 焰 高 。 在 众多 的 Photoshop 插 
件 中 ， 最 重要 的 一 类 束 是 滤 镜 ， 或 着 说 是 图 片 的 效 末 。 比 如 我 想 把 一 
张 图 片 制 作成 老 照 片 的 效果 ， 在 没有 滤 镜 的 情况 下 ， 了 就 需要 手工 调整 
很 多 图 片 属性 才能 作 到 ， 而 使 用 滤 镜 ， 则 只 需 把 滤 镜 加 载 到 图 片上 即 
可 。 显 然 ， 使 用 滤 镜 插件 能 获得 如 下 好 处 : 


e 提高 工作 效率 。 

e 得 到 更 专业 的 效果 。 

对 使 用 者 的 技术 水 平 要 求 相 对 较 低 o 

WPF3 引 | 进 了 这 种 “ 滤 镜 插件 ”的 思想 ， 其 成 有 果 就 是 UIElement 类 的 Effect 属 
性 。Effect 属 性 的 数据 类 型 是 Effect 类 ，Effect 类 是 抽象 类 ， 也 就 是 说 
UIElement 的 Effect 属性 可 以 接收 Effect 类 的 任何 一 个 派生 类 的 派生 类 实 
例 作 为 它 的 值 。Effect 类 位 于 System.Windows.Media.Effects 名 称 空 间 
中 ， 它 的 派生 类 有 3 个 ， 分 别 古 : 


e BlurEffect， 模 糊 效 果 。 


e DropShadowEffect， 投影 效果 。 
e ShaderEffect: 着 色 器 效果 (抽象 类 ) ° 


你 可 能 会 想 强大 的 Effect 类 其 派生 类 怎么 还 不 如 已 经 废弃 的 
BitmapEffect 类 多 呢 ? 答案 是 这 样 的 : 因为 模糊 和 投影 效果 在 编程 中 用 
的 最 多 ， 所 以 .NET Framework 内 建 了 这 两 个 效果 。 这 两 个 效果 使 用 起 
来 非常 方便 ， 而 且 请 注意 ， 这 两 个 殖 果 是 用 GPU 进行 演 染 ， 而 不 像 
BitmapEffect 那 样 使 用 CPU 演 染 。ShaderEffect 仍 然 是 个 抽象 类 ， 它 就 是 
留 给 滤 镜 插件 开发 人 员 的 接口 。 只 要 你 开发 出 派生 目 ShaderEffec 的 歼 
果 类 ， 别 人 就 可 以 直接 拿 来 用 。 


开发 着 色 器 效果 需要 使 用 Pixel Shader 语 言 (简写 与 Photoshop 一 样 ， 也 
是 PS) 和 一 些 DirectX 的 知识 ， 超 出 了 本 书 的 范围 。PS 的 最 新 版 本 是 
3.0， 感 兴趣 的 读者 可 以 在 微软 的 官方 网 站 找到 它 的 SDK 和 开发 文档 。 
微 软 PDC2008 和 PDC2009 的 视频 中 也 有 一 些 讲 解 ， 

http://windowsclient.net/wpf/ 中 也 可 以 找到 一 些 资 料 。 


对 于 大 多 数 WPF 开 发 人 员 来 说 ， 我 们 需要 的 是 现成 的 效果 滤 镜 ， 所 以 

官方 的 滤 镜 包 可 以 从 这 里 下 载 : http://wpffx.codeplex.com。 解 压 下 载 的 

zip 文 件 ， 可 以 看 到 分 别 为 WPF 和 Silverlight 准 备 的 两 套 滤 镜 。 进 入 WPF 

SM MEL 目 就 是 效果 库 。 效 果 库 的 使 
法 如 下 。 


首先 从 http://wpf.codeplex.com/releases/view/14962 下 £X Shader Effects 
BuildTask and Templates.zip ， 解 压 zip 文 件 后 按 其 中 的 Readme 文 档 进 行 
安装 、 配 置 。 这 是 着 色 器 效果 的 编译 一 开发 环境 ， 没 有 它 ， 着 色 器 效 
果 项 目 将 不 能 被 编译 。 如 有 果 你 想 开 发 自己 的 效果 滤 镜 ， 也 必须 安装 这 
个 环境 。 检 验 安 装 是 否 成 功 的 办 法 是 启动 Visual Studio， 碍 看 是 否 可 以 
新 建 WPF Shader Effect Library 项 目 ， 如 图 12-14 所 示 。 


ec WPF Custom Control Library Visual C$ 
e WPF Shader Effect Library cg Visual C* 
ec WPF User Control Library Visual C$ 


图 12-14 ”检查 安装 是 否 成 功 


新 建 一 个 WPF 解 决 方案 ， 把 ShaderEffectLibrary 中 的 项 目 添 加 进来 (如 
图 12-15 所 示 ) ， 并 为 WPF 项 目 添加 对 WPFShaderEffectLibrary 项 目的 引 
用 ， 你 就 可 以 使 用 效果 库 里 的 效果 了 。 


aloa 
" Solution WpfApplicationl' (2 projects) 
4 (9) WpfApplicationl 
; [m Properties 
4 y References 
:Q Microsoft.CSharp 


: “© PresentationCore 
la | E 下 | e «2 PresentationFramework 


. ' ;> 4 ' M - em 
| Appl 
四 Solution 'WpfApplication1' (2 projects) «2 System.Core 


: E — ] “3 System.Data 


» (m Properties «Q) System.Data.DataSetExtensions 
b 图 References 3 System Xaml 
b pj Appxami «C System.Xml 
4 图 MainWindow.xaml . System.Xml.Linq 
$3 MainWindow.xaml.cs ‘BB WindowsBase 
4 图 WPFShadertffectLibrary | 
b E Properties » 间 Appxaml 
» [m References idi] Fighterjpg 
» 国 EffectFiles 4 W) MainWindow.xaml 
b 国 ShaderSource *3 MainWindow.xaml.cs 
8) EffectLibrary.cs » 国 WPFShadertffectLibrary 


图 12-15 ”添加 ShaderEffectLibrary 项 目 


向 项 目 中 添加 一 个 图 片 ， 并 在 XAML 文 件 中 设置 其 Effect 属 性 : 


«Window x:Class-"WpfApplication] .MainWindow" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:selibz"clr-namespace:ShaderEffectLibrary;assemblyzShaderEffectLibrary" 
Title-"MainWindow" Height-"240" Width-"520"» 

«Grid» 
<l--Layout--> 
<Grid.ColumnDefinitions> 
<ColumnDefinition /> 
<ColumnDefinition /> 
</Grid.ColumnDefinitions> 
<l--Content--> 
<Image Source="Fighter.jpg" Margin="15" Grid.Column="0"> 
<Image.Effect> 
<I- Elo» 
<DropShadowEffect BlurRadius="10" Opacity-"0,75" /> 
</Image.Effect> 
</Image> 
<Image Source="Fighter.jpg" Margin="15" Grid.Column="1"> 
<Image.Effect> 
<IRE RRR --> 
<selib:ZoomBlurEffect Center-"0.5,0.5" BlurAmount="0,2" /> 
</Image.Effect> 
</Image> 
</Grid> 
</Window> 


运行 程序 ， 结 果 如 图 12-16 所 示 。 


8 ' MainWindow 


图 12-16 ”运行 效果 


仅 需 设置 几 个 属性 ， 层 次 分 明 、 动 感 十 足 的 图 片 效 果 就 出 来 了 ! 这 样 
的 工作 既 可 以 由 设计 师 来 完成 ， 也 可 以 由 程序 员 来 完成 。 如 果 对 效果 
不 满意 ， 直 接 在 XAML 文 件 中 修改 并 保存 即 可 ， 而 不 必 像 以 前 那样 再 
用 Photoshop 等 工具 返工 。 同 时 ， 同 一 张 源 图 片 可 以 加 载 不 同 的 效果 ， 
也 不 必 像 以 前 那样 先 由 设计 师 制作 多 个 图 片 再 添加 进程 序 ， 这 样 ， 程 
序 的 编译 结果 也 会 小 很 多 。 


12.3 ”图形 的 变形 


当 你 看 到 “变形 (Transform) ”这 个 词 时 ， 首 先 会 想起 什么 ? MK ` H 
Wm? 放大 、 缩 小 ? 还 是 .……… 变 形 金刚 ? 其 实 ，WPF 中 的 “变形 ”一 词 合 
义 很 广 ， 斥 才 、 人 位置、 坐标 系 比例 、 旋 转角 度 等 的 变化 都 算是 变形 。 


WPF 中 的 变形 与 UI 元 素 是 分 开 的 。 举 个 例子 ， 你 可 以 设计 一 个 “向 左旋 
转 45 度 ”的 变形 ， 然 后 把 这 个 变形 赋值 给 不 同 UI 元 素 的 变形 控制 属性 ， 
这 些 UI 元 素 就 都 向 左旋 转 45 度 了 。 这 种 将 元 素 与 变形 控制 属性 分 开 的 
设计 方案 既 减 少 了 为 UIElement 类 添加 过 多 的 属性 ， 又 提高 了 变形 类 实 
例 的 复 用 性 ， 可 谓 一 举 两 得 。 这 种 设计 思路 非常 符合 策略 模式 中 * 有 一 
个 ?" 比 “是 一 个 ”更 加 灵 话 的 思想 。 


控制 变形 的 属性 有 两 个 ， 分 别 是 : 


e RenderTransform: 呈现 变形 ， 定 义 在 UIElement 类 中 。 
e LayoutTransform: 布局 变形 ， 定 义 在 FrameworkElement 类 中 。 


为 FrameworkElement 派 生 自 UIElement， 而 控件 的 基 类 Control 类 叉 派 
生 目 FrameworkElement， 所 以 在 控件 级 别 两 个 属性 你 都 能 看 到 。 这 两 
个 属性 都 是 依赖 属性 ， 它 们 的 数据 类 型 都 是 Transform 抽 象 类 ， 也 就 是 
说 ，Transform 类 的 派生 类 实 均 可 用 来 为 这 两 个 属性 赋值 。Transform 抽 
象 类 的 派生 类 有 如 下 一 些 : 


e MatrixTransform: 和 矩阵 变形 ， 把 容纳 被 变形 UI 元 素 的 矩形 顶点 看 作 
一 个 矩阵 进行 变形 。 


e  RotateTransform: 旋转 变形 ， 以 给 定 的 点 为 旋转 中 心 ， 以 角度 为 单 
位 进行 旋转 变形 。 


e ScaleTransform: 坐标 系 变 形 ， 调 整 被 变形 元 素 的 坐标 系 ， 可 产生 
缩放 效果 。 


T HERE 拉 伸 变形 ， 可 在 横 和 同和 纵 同 上 对 被 变形 元 素 进 行 
Wi o 


e TranslateTransform: WEZE, EREE JUS TET IH] EXAM m E fiie 
一 个 给 定 的 值 。 


e  TransformGroup: 变形 组 ， 可 以 把 多 个 独立 变形 合成 为 一 个 变形 
组 、 产 生 复合 变形 效果 。 


12.3.1 呈现 变形 


什么 是 “呈现 变形 (Render Transform) ” 呢 ? 相 信 大 家 都 知道 什么 是 “ 海 
TERRI! 远 远 望 去 ， 远 方 的 天 空中 球 浮 着 一 座 城市 ， 而 实际 上 那 地 
方 没有 城市 ， 有 的 只 是 沙漠 或 海 详 ..…. 海 市 古 楼 的 成 因 是 密度 不 均 的 
空气 使 光线 产生 折射 ， 最 终 让 人 眼看 到 城市 的 影像 皇 现在 本 不 应 该 出 
现 的 位 置 这 就 是 城市 影像 的 呈现 出 现 了 变形 。WPF 的 
RenderTransform 属 性 就 是 要 起 到 这 个 作用 ， 让 UI 元 素 呈 现 出 来 的 属性 
与 它 本 来 的 属性 不 一 样 ! 比如 ， 一 个 按钮 本 来 处 在 Canvas 或 者 Grid 的 左 
而 我 可 以 使 用 RenderTransform 属 性 让 其 呈现 在 右 下 角 并 且 癌 右 
旋转 45。。 


观察 下 面 这 个 例子 : 


«Grid» 
«Grid.ColumnDefinitions? 
«ColumnDefinition Width-" Auto" /> 
«ColumnDefinition Width-"*" /» 
«/Grid.ColumnDefinitions? 
«Grid. RowDefinitions? 
<RowDefinition Height="Auto" > 
<RowDefinition Height="*" /> 
</Grid.RowDefinitions> 
«Button Width-"80" HorizontalAlignment="Left" VerticalAlignment-"Top" 
Height-"80" Content-"Hello"» 
«Button.RenderTransform» 
<|-- 复 合 变形 ..> 
«TransformGroup» 
«RotateTransform CenterXz"40" CenterYz"40" Anglez"45" /> 
«TranslateTransform X="300" Yz"200" /> 
«[TransformGroup» 
«[Button.RenderTransform» 
</Button> 


</Grid> 


在 布局 Grid 里 ， 我 分 划 了 两 行 两 列 ， 并 且 第 一 行 的 行 高 、 第 一 列 的 列 帘 
都 由 Button 来 决定 。 同 时 ， 我 为 Button 有 的 RenderTransform 设 置 了 一 个 复 
合 变 形 ， 使 用 TransformGroup 将 一 个 偏 移 变 形 和 一 个 旋转 变形 组 合 在 一 
起 。 偏 移 变形 将 Button 的 呈现 (而 不 是 Button 本 身 ) 向 右 移动 300 像 
素 、 癌 下 移动 200 像 素 ; 旋转 变形 将 Button 的 呈现 向 右 旋转 了 45°。 在 窗 
体 设 计 器 里 ， 我 们 可 以 清晰 地 看 到 Button 本 身 的 位 置 并 没有 改变 (第 一 
行 和 第 一 列 没 有 变化 ) ， 但 Button 却 出 现在 了 右 下 (300,200) 的 位 置 ， 并 
向 右 旋 转 了 45"， 如 图 12-17 所 示 。 


„ MainWindow 


图 12-17 设计 器 中 位 置 
运行 程序 ， 用 户 看 到 的 结果 如 图 12-18 所 示 。 


8^ MainWindow 


图 12-18 ”运行 效果 
用 户 并 不 能 察觉 到 究竟 是 控件 本 身 的 位 置 、 角 度 发 生 了 改变 ， 还 是 呈 
现 的 位 置 与 角度 发 生 了 改变 。 


为 什么 需要 呈现 变形 呢 ? 答案 是 : 为 了 效率 ! 在 窗 体 上 移动 UI 元 素 本 

会 导致 窗 体 布局 的 改变 ， 而 窗 体 布局 的 每 一 个 (哪怕 是 细微 的 ) 变 
化 都 将 导致 所 有 窗 体 元 素 的 尺寸 测算 函数 、 位 置 测 算 函 数 、 呈 现 函 数 
等 的 调用 ， 造 成 系统 资源 占用 激增 、 程 序 性 能 陡 降 。 而 使 用 呈现 变形 
则 不 会 遇 到 这 样 的 问题 ， 呈 现 变形 只 改变 元 素 “ 出 现在 哪里 >， 所 以 不 
率 扯 布 局 的 改变 、 只 涉及 窗 体 的 重 绘 。 所 以 ， 当 你 需要 制作 动画 的 时 
候 ， 请 切记 要 使 用 RenderTransform ° 


12.3.2 ”布局 变形 


与 呈现 变形 不 同 ， 布 局 变形 会 影响 窗 体 的 布局 、 导 致 窗 体 布局 的 重新 
测算 。 因 为 窗 体 布局 的 重新 测算 和 绘制 会 影响 程序 的 性 能 ， 所 以 布局 


变形 一 般 只 用 在 静态 变形 上 ， 而 不 用 于 制作 动画 。 


考虑 这 样 一 个 需求 :制作 一 个 文字 纵向 排列 的 浅 蓝 色 标题 福 。 如 果 我 
们 使 用 至 现 变形 ， 代 码 如 下 : 


«Grid» 
<|--Layout--> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width="*" /> 
</Grid.Column Definitions> 
<|--Content--> 
«Grid x:Name-"titleBar" Background-"LightBlue"» 
<TextBlock Text-"Hello Transformer!" FontSize-"24" 
HorizontalAlignment-"Left" VerticalAlignment-" Bottom" 
<TextBlock. RenderTransform 
«RotateTransform Angle-"-90" /> 
«/TextBlock.RenderTransform» 
«/TextBlock» 
</Grid> 
</Grid> 


设计 需 显 示 效 采 如 图 12-19 所 示 。 


x MainWindow 


图 12-19 ”设计 器 显示 效果 
尽管 我 们 让 显示 文字 的 TextBox“ 看 起 来 ”旋转 了 90"， 但 TextBox 本 喘 并 
没有 改变 ， 改 变 的 只 是 它 的 显示 ， 所 以 ， 它 的 真实 宽度 仍然 把 宽度 设 
为 Auto 的 第 一 列 撑 得 很 宽 。 显 然 这 不 是 我 们 希望 看 到 的 。 


分 析 需 求 ， 我 们 实际 上 需要 的 是 静态 改变 TextBox 的 布局 ， 因 此 应 该 使 
用 LayoutTransformn。 仅 需 对 上 面 的 代码 做 一 处 改动 : 


«Grid» 
<l--Layout--> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width=" Auto" /> 
<ColumnDefinition Width-"*" /> 
</Grid.ColumnDefinitions> 
<l--Content--> 
«Grid x:Name="titleBar" Background="LightBlue"> 
<TextBlock Text="Hello Transformer!" FontSize="24" 
HorizontalAlignment="Left" VerticalAlignment="Bottom"> 
<TextBlock. LayoutTransform? 
<RotateTransform Angle="-90" /> 
«/TextBlock.LayoutTransform- 
«/TextBlock» 
</Grid> 
</Grid> 


设置 大 中 的 效 末 如 图 12-20 所 示 。 
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图 12-20 ”运行 效果 


12.4 动画 


何 为 动画 ? 动画 目 然 束 是 “会 动 的 画 *。 所 谓 “ 会 动 ” 不 光 指 位 置 会 移动 ， 
还 包括 角度 的 旋转 、 颜 色 的 变化 、 透 明度 的 增 减 等 。 细 心 的 读者 一 定 
已 经 发 现 ， 动 画 本 质 就 是 在 一 个 时 间 段 内 对 象 位置 、 角 度 、 颜 色 、 透 
明度 等 属性 值 的 连续 变化 。 这 些 属性 中 ， 有 些 古 对 象 目 身 的 属性 ， 有 
些 则 是 上 一 节 所 学 的 图 形变 形 的 属性 。 有 一 点 需要 注意 ，WPF 规 定 ， 
可 以 用 来 制作 动画 的 属性 必须 是 依赖 属性 。 


变化 即 是 运动 。“ 没 有 脱离 运动 的 物体 ， 也 没有 脱离 物体 的 运动 >， 唯 
物 主义 哲学 如 是 说 。WPF 的 动画 也 是 一 种 运动 ， 这 种 运动 的 主体 就 是 
各 种 UI 元 素 ， 这 种 运动 本 身 就 是 施加 在 UI 元 素 上 的 一 些 Timeline 派 生 类 
的 实例 。 在 实际 工作 中 ， 我 们 要 做 的 事情 往往 就 是 先 设 计 好 一 个 动画 
构思 、 用 一 个 Timeline 派 生 类 的 实例 加 以 表达 ， 最 后 让 某 个 UI 元 素来 执 
行 这 个 动画 、 完 成 动画 与 动画 主体 的 结合 。 
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WPEF 把 简单 动画 称 为 AnimationTimeline。 复 杂 的 〈 即 并 行 的 、 复 合 
HJ) 动画 就 需要 UI 上 的 多 个 元 素 协同 完成 ， 就 像 电影 中 的 一 段 场 景 。 
复杂 动画 的 协同 包括 有 了 哪些 UI 元 素 参 与 动画 、 每 个 元 素 的 动画 行为 是 
什么 、 动 画 何 时 开始 何 时 结束 等 。WPF 把 一 组 协同 的 动画 也 称 为 
Storyboard ° 


Timeline、AnimationTimeline 和 Storyboard 的 关系 如 图 12-21 所 示 。 


Timeline 
TimelineGroup AnimationTimeline 


ParallelTimeline 各 种 动画 派生 类 


Storyboard 


图 12-21 关系 图 


本 市 内 容 分 为 两 部 分 ， 先 研究 如 何 设计 独立 的 简单 动画 ， 再 研究 如 何 
把 简单 动画 组 合 在 一 起 形成 场景 。 


12.4.1 简单 独立 动画 


前 面 说 过 ， 动 画 就 是 “会 动 的 画 ”"， 而 这 个 “会 动 ” 指 的 就 是 能 够 让 UI 元 素 
或 元 素 变形 的 某 个 属性 值 产生 连续 变化 。 任 何 一 个 属性 都 有 目 己 的 数 
据 类 型 ， 比 如 UIElement 的 Width 和 Height 属 性 为 Double 类 型 、Window 
的 Title 属 性 为 String 类 型 。 几 乎 针对 每 个 可 能 的 数据 类 型 ，WPF 的 动画 
子 系 统 都 为 其 准备 了 相应 的 动画 类 ， 这 些 动 画 类 均 派生 日 
AnimationTimeline。 它 们 包括 : 


e BooleanAnimationBase 


e ByteAnimationBase 


CharAnimationBase 
ColorAnimationBase 
DecimalAnimationBase 
DoubleAnimationBase 
Int16AnimationBase 
Int32AnimationBase 
Intó4AnimationBase 
MatrixAnimationBase 
ObjectAnimationBase 
Point3DAnimationBase 
PointAnimationBase 
QuaternionAnimationBase 
RectAnimationBase 
Rotation3DAnimationBase 
SingleAnimationBase 
SizeAnimationBase 
StringAnimationBase 
ThicknessAnimationBase 
Vector3DAnimationBase 


VectorAnimationBase 
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的 情况 下 ， 这 些 抽象 基 类 又 能 派生 出 3 种 具体 动画 ， 即 简单 动画 、 关 键 
帧 动画 、 沿 路 径 运 动 的 动画 。 例 如 DoubleAnimationBase， 它 完整 地 派 
生出 了 3 个 具体 动画 ， 如 图 12-22 所 示 。 


DoubleAnimationBase 


DoubleAnimationUsingKeyFrames 


DoubleAnimation DoubleAnimationUsingPath 


图 12-22 DoubleAnimationBase 派 生出 的 具体 动画 


而 针对 于 int 类 型 属性 的 Int32AnimationBase 只 派生 出 Int32Animation 
Int32AnimationUsingKeyFrames 两 个 具 体 动 Bi 
BooleanAnimationBase 和 CharAnimationBase 的 派生 类 则 更 少 只 有 关 
键 帧 动画 类 。 


因为 在 WPF 动 画 系统 中 Double 类 型 的 属性 用 得 最 
DoubleAnimationBase 的 3k 生 qu 最 元 K , Br ELK 


类 旁 通 
1. 简单 线性 动画 


所 谓 “ 简 单线 性 动画 ?就 是 指 仅 由 变化 起 点 、 变 化 终点 、 变 化 幅度 、 变 
化 时 间 4 个 要 素 构 成 的 动画 。 


e 变化 时 间 (Duration 属 性 ) : 必须 指定 ， 数 据 类 型 为 Duration 。 


o 变化 终点 (To 属性 ) : 如 果 没 有 指定 变化 终点 ， 程 序 将 采用 上 一 次 
动画 的 终点 或 默认 值 。 


变化 幅度 (By 属性 ) : 如 果 同 时 指定 了 变化 终点 ， 变 化 幅度 将 被 忽 


e 
Wi o 
o 变化 起 点 (From 属 性 ) : 如 果 没 有 指定 变化 起 点 则 以 变化 目标 属性 
的 当前 值 为 起 点 。 


让 我 们 分 析 一 个 商 单 实例 。 例 于 的 XAML 代 码 如 下 : 


«Orid» 
«Button Content-" Move!" HorizontalAlignment-"Left" VerticalA lignment-"Top" 
Width-"60" Height-"60" Click-"Button Click"» 
«Button. RenderTransform 
«TranslateTransform x:Name-"tt" X="0" Y="0" /> 
</Button,RenderTransform> 
</Button> 
</Grid> 


用 户 界 面 上 只 包含 一 个 Button， 这 个 Button 的 RenderTransform 属 性 值 是 
一 个 名 为 tt 的 TranslateTransform 对 象 ， 改 变 这 个 对 象 的 X 和 Y 值 就 会 让 
Button 的 显示 位 置 (而 不 是 真实 位 置 ) 变化 。Button 的 Click 事 件 处 理 器 
代码 如 下 : 


private void Button. Click(object sender, RoutedEventArgs e) 


Í 
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DoubleAnimation daX = new DoubleAnimation(); 
DoubleAnimation daY = new DoubleAnimation(); 


/ 指定 起 点 
daX.From = 0D; 
daY.From = 0D; 


I| 指定 终点 

Random r= new Random(); 
daX.To = r.NextDouble() * 300; 
daY.To = r.NextDouble() * 300; 


| 指定 时 长 
Duration duration = new Duration(TimeSpan.FromMilliseconds(300)); 
daX.Duration = duration; 


daY.Duration = duration; 


省 动画 的 主体 是 TranslateTransform 变形 ， 而 非 Button 
this.tt.BeginAnimation(TranslateTransform.XProperty, daX); 
this.tt.BeginAnimation(TranslateTransform. Y Property, daY); 


X TranslateTransform hy X ^ Y 8 135] X Double Æ, ， 所 以 我 们 选用 
DoubleAnimation 来 使 之 产生 变化 。 代 码 中 声明 了 daX 和 daY P ^ 
DoubleAnimation 变 量 并 分 别 为 之 创建 引用 实例 。 接 下 来 的 代码 依次 为 
它们 设置 了 起 始 值 、 终 止 值 、 变 化 时 间 。 最 后 ， 调 用 BeginAnimation 方 
法 ， 计 daXx 作 用 在 TranslateTransform 的 XProperty 依 赖 属性 上 、 让 daY 作 
用 在 TranslateTransform 的 YProperty 依 赖 属性 上 。 


运行 程序 ， 每 次 单 击 按钮 ， 按 钮 都 会 从 起 始 位置 ( 窗 体 的 左上 和 角 ) 向 
窒 体 右 下 长 宽 不 超出 300 像 素 的 和 矩形 内 的 某 点 运动 ， 完 成 运动 的 时 长 是 
300 坚 秒 。 歼 果 如 图 12-23 所 示 。 


DoubleAnimation DoubleAnimation 


指定 起 只 不 指定 起 所 
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图 12-23 ”运行 程序 按钮 运动 效果 


注意 
这 上段 代码 有 以 下 几 处 值得 注意 的 地 方 : 
e 因为 指定 了 daX 和 daY 的 起 始 值 为 0， 所 以 每 次 按钮 都 会 < 跳 " 回 窗 体 的 左上 角 开 始 动画 。 如 


a 前 位 置 开始 下 一 次 动画 ， 只 需要 把 “daX.From=0D;” 和 “daY.From=0D;” 两 句 代码 
余 即 可 。 


e 尽管 表现 出 来 的 是 Button 在 移动 ， 但 DoubleAnimation 的 作用 目标 并 不 是 Button 而 是 
TranslateTransform 实 例 ， 因 为 TranslateTransform 实 例 是 Button 的 RenderTransform 属 性 值 ， 所 以 
Button“ 看 上 去 ”是 移动 了 。 


e 前 面 说 过 ， 能 用 来 制作 动画 的 属性 必须 是 依赖 属性 ，TranslateTransform 的 XProperty 和 
YProperty 束 是 两 个 依赖 属性 。 


e UIElement 和 Animatable 两 个 类 都 定义 有 BeginAnimation 这 个 方法 。TranslateTransform 派 生 
目 Animatable 类 ， 所 以 具有 这 个 方法 。 这 个 方法 的 调用 者 就 是 动画 要 作用 的 目标 对 象 ， 两 个 参 
数 分 别 指明 被 作用 的 依赖 属性 (TranslateTransform. XProperty fl TranslateTransform. YProperty) _ 
和 设计 好 的 动画 (daX 和 daY) 。 可 以 猜想 ， 如 果 需 要 动画 改变 Button 的 宽度 或 高 度 (这 两 个 属 
性 也 是 Double 类 型 ) ， 也 应 该 先 创建 DoubleAnimation 实 例 ， 然 后 设置 起 止 值 和 动画 时 间 ， 最 
调 用 Button 的 BeginAnimation 方法 、 使 用 动画 对 象 影 响 Button.WidthProperty 和 
Button.HeightProperty ? 
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private void Button. Click(object sender, RoutedEventArgs e) 


j 
1 


DoubleAnimation daX = new DoubleAnimation(); 
DoubleAnimation daY = new DoubleAnimation(); 


I 指定 幅度 
daX.By = 100D; 
daY.By = 100D; 


1 指定 时 长 

Duration duration = new Duration(TimeSpan.FromMilliseconds(300)); 
daX.Duration = duration; 

daY.Duration = duration; 


I 动画 的 主体 是 TranslateTransform 变形 ， 而 非 Button 


this.tt.BeginAnimation(TranslateTransform.XProperty, daX); 
this.tt.BeginAnimation(TranslateTransform. Y Property, daY); 


每 次 单 击 按 捍 ， 按 钮 都 会 同窗 体 的 右 下 角 移动 。 效 果 如 图 12-24 所 示 。 


DoubleAnimation 


图 12-24 ”按钮 移动 效果 


2. 高 级 动画 控制 


使 用 From、To、By、Duration 儿 个 属性 进行 组 合 束 已 经 可 以 制作 很 多 
不 同 效果 的 动画 了 ， 然 而 WPF 动 画 系统 提供 的 控制 属性 远 不 止 这 些 。 
如 果 想 制作 更 加 复杂 或 逼真 的 动画 ， 还 需要 使 用 以 下 一 些 效 果 。 


属性 应 用 举例 
AccelerationRatio NUN. ee 模拟 汽车 启动 
不 大 于 1.0 
减速 速率 介 于 0.0 和 1.0 之 间 ， 与 AccelerationRatío 2 ue 
DecelerationRatio epe IF AURLLD ENS S oen CR 模拟 汽车 刹车 


SpeedRatio 动画 实际 播放 速度 与 正常 速度 的 比值 快 进 播放 、 慢 动作 


续 表 


属性 应 用 举例 
AutoReverse 是 天 以 相反 的 动画 方式 从 终止 值 返回 起 始 值 倒退 播放 
动画 的 重复 行为 ， 取 0 为 不 播放 ,使 用 double 类 型 值 可 控 | uus 
e obs NH ee AE T 1 
Bepesiiteumoe 制 循环 次 数 ， 取 RepeatBehavior Forever 为 永远 循环 THER 
BeginTime 正式 开始 播放 前 的 等 待 时 间 多 个 动画 之 前 的 协同 
EasingFunction 缓冲 式 渐变 乒乓 球 弹跳 效果 


对 于 这 些 属性 ， 大 家 可 以 目 己 动手 答 试 一 一 对 它们 进行 组 合 往往 可 以 
产生 很 多 意 想 不 到 的 效果 。 


在 这 些 属性 中 ，EasingFunction 是 一 个 扩展 性 非常 强 的 属性 。 它 的 取 值 

zEIEasingFunctionf OXW, ff] WPF E "i HJIEasingFunctionK £ 2S wA 

十 多 种 ， 每 个 派生 类 都 能 产生 不 同 的 结束 效 采 。 比 如 BounceEase 可 以 

ec SEM 我 们 可 以 直接 拿 来 使 用 而 不 必 花 精力 去 亲 
| o 


如 琳 把 前 面 例子 的 代码 改 成 这 样 : 


private void Button. Click(object sender, RoutedEventArgs e) 
| 
DoubleAnimation daX 7 new DoubleAnimation(); 
DoubleAnimation daY = new DoubleAnimation(); 


J| 设置 反弹 

BounceEase be = new BounceFase(); 

be.Bounces = 3; // 弹跳 3 次 

be.Bounciness = 3; // 弹性 程度 ， 值 越 大 反弹 越 低 
daYEasingFunction = be; 


Il 指定 终点 
daX.To 300; 
daY.To = 300; 


I| 指定 时 长 
Duration duration = new Duration(TimeSpan.FromMilliseconds(2000)); 
daX.Duration = duration; 


daY.Duration = duration; 
I 动画 的 主体 是 TranslateTransform 变形 ， 而 非 Button 


this.tt.BeginAnimation(Translate Transform. XProperty, daX); 
this.tt.BeginAnimation(TranslateTransform.Y Property, daY); 


运行 效果 如 图 12-25 所 示 。 


DoubleAnimation 


图 12-25 ”按钮 运动 曲线 


3. KEW H 


动画 古 UI 元 素 属 性 连续 改变 所 产生 的 视觉 效果 。 属 性 每 次 细微 的 变化 
都 会 产生 一 个 新 的 画面 ， 每 个 新 画面 就 称 为 一 “ 巾 *"， 帧 的 连续 播放 就 
产生 动画 效果 。 如 同 电影 一 样 ， 单 位 时 间 内 播放 的 帧 数 越 多 ， 动 画 的 
效 采 融 越 细致 。 前 面 讲 到 的 和 容 单 动画 只 设置 了 起 点 和 终点 ， 之 间 的 动 
画 帧 都 是 由 程序 计算 出 来 并 绘制 的 ， 程 序 员 无 法 进行 控制 。 关 键 帧 动 
画 则 人 允许 程序 员 为 一 段 动画 设置 几 个 “里 程 碑 ”， 动 画 执行 到 里 程 碑 所 
在 的 时 间 点 时 ， 被 动画 所 控制 的 属性 值 也 必须 达到 设 定 的 值 ， 这 些 时 
间 线 上 的 “里 程 碑 ”就 是 关键 帧 。 


思考 这 样 一 个 需求 : 我 想 让 一 个 Button 在 单 击 后 用 900 毫 秒 的 时 长 从 左 
上 和 角 移动 到 右 下 角 ， 但 移动 路 线 不 钙 直 接 移动 而 是 走 “2” 了 字形， 如 图 12- 


26 所 示 。 


Key Frames 


图 12-26 ”按钮 “2”* 字 形 移动 路 线 效 果 


如 果 我 们 不 知道 有 关键 帧 动画 可 用 而 只 使 用 简单 动画 ， 那 么 我 们 需要 
创建 和 若干 个 简单 动画 分 别 控制 TranslateTransform 的 X 和 Y， 比 较 环 手 的 
是 需要 欣 制 这 些 动画 之 间 的 协同 。 协 同 策略 有 两 种 ， 一 种 是 靠 时 间 来 
协同 ， 也 就 是 设置 后 执行 动画 的 BeginTime 以 等 待 前 面 动画 执行 完毕 ， 
男 一 种 是 靠 事 件 协同 ， 也 就 是 为 完 执行 的 动画 添加 Completed 事 件 处 理 
右 ， 在 事件 处 理 器 中 开始 下 一 段 动画 。 因 为 是 多 个 动画 协同 ， 所 以 在 
动画 需要 改变 的 时 候 ， 代 码 的 改动 也 会 比较 大 。 


使 用 天 键 帆 动 画 情况 就 会 大 有 改观 我 们 只 需要 创建 两 个 
DoubleAnimationUsingKeyFrames 实 例 ， 一 个 控制 TranslateTransform 的 X 
lg TE ^ 5 — ^^ f m TranslateTransform B Y Je TE Bl mJ » & ^P 
DoubleAnimationUsingKeyFrames 各 拥有 三 个 关键 帧 用 于 指明 X 或 Y 在 三 
个 时 间 点 (两 个 拐点 和 终点 ) 应 该 达到 什么 样 的 值 。 


程序 的 XAML 代 码 如 下 : 


«Grid» 
«Button Content-" Move" VerticalAlignment-"Top" HorizontalAlignment-"Left" 
Width-"80" Height-"80" Click-"Button Click" 
«Button.RenderTransform? 
«TranslateTransform x:Name="tt" X="0" Y="0" /> 
</Button.RenderTransform> 
</Button> 
</Grid> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button. Click(object sender, RoutedEventArgs e) 

| 
DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames(); 
DoubleAnimationUsingKeyFrames dakY = new DoubleAnimationUsingKeyFrames(); 


I| 设置 动画 总 时 长 
dakX.Duration = new Duration(TimeSpan.FromMilliseconds(900)); 
dakYDuration = new Duration(TimeSpan.FromMilliseconds(900)); 


I| 创建 、 添 加 关键 由 

LinearDoubleKeyFrame x kf 1 = new LinearDoubleKeyFrame( J; 
LinearDoubleKeyFrame x kf 2 = new LinearDoubleKeyFrame(); 
LinearDoubleKeyFrame x kf 3 = new LinearDoubleKeyFrame(; 


x kf I. KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)); 
x kf I. Value = 200; 

x kf 2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)); 
x kf 2. Value = 0; 

x kf 3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900)); 
x kf 3. Value = 200; 


dakX.KeyFrames.Add(x kf 1); 
dakX.KeyFrames.Add(x kf 2); 
dakX.KeyFrames.Add(x kf 3); 


LinearDoubleKeyFrame y kf | 7 new LinearDoubleKeyFrame(J; 
LinearDoubleKeyFrame y kf 2 7 new LinearDoubleKeyFrame(; 
LinearDoubleKeyFrame y. kf 3 = new LinearDoubleKeyFrame(; 


y kf I.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)); 
y kf I. Value = 0; 

y kf 2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)); 
y kf 2. Value = 180; 

y kf 3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900)); 
y kf 3. Value = 180; 


dakY.KeyFrames.Add(y kf 1); 
dakY.KeyFrames.Add(y kf 2); 
dakY.KeyFrames.Add(y kf 3); 


I 执行 动画 
this.tt.BeginAnimation(TranslateTransform.XProperty, dakX); 
this.tt.BeginAnimation(TranslateTransform. Y Property, dakY ; 


TE XX 2H X WE bm om cp, d d[] fe HR] RU Xe a ROBY Edi 
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(KeyTime 属 性 ) 和 到 达 时 间 点 时 目标 属性 的 值 (Value 属性 ) 动画 就 
会 让 目标 属性 值 在 两 个 关键 帧 之 间 勾 速 变化 。 比 如 这 两 名 代码: 


x kf 1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)); 
x kf I. Value = 200; 

x kf 2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)); 
x kf 2. Value = 0; 


x kf 1 关键 帧 处 在 时 间 线 300 毫 秒 处 ， 目 标 属性 值 在 这 一 时 刻 必 T 
200 (是 什么 属性 这 时 并 不 知道 ， 但 要 求 这 个 属性 值 到 这 个 时 间 一 定 达 
到 200) ， 类 似 ，x_kf_2 在 时 间 线 上 的 位 置 是 600 毫 秒 处 ， 目标 属性 的 值 
为 0。 当 动画 开始 执行 后 ， 程 序 会 自动 计算 出 目标 属性 在 这 两 个 关键 帧 
之 间 的 匀速 变化 。 


前 面 的 代码 中 ， 为 天 键 帆 的 KeyTime 属性 使 用 了 
KeyTime. PromTimeSpan 静 态 方法 ， 这 样 可 以 得 到 一 个 绝对 时 间 点 。 使 
用 KeyTime. FromPercenti 5.77 法 则 可 以 获得 以 百分比 计算 的 相对 时 间 
点 ， 程 序 将 下 整个 关键 岩 动 画 的 时 长 (Duration) 视 为 100%。 我 们 可 以 
把 前 面 的 代码 更 改 为 这 样 : 


x kf 1.KeyTime = KeyTime.FromPercent(0.33); 
x kf 1.Value = 200; 

x kf 2.KeyTime = KeyTime.FromPercent(0.66): 
x kf 2. Value = 0; 

x kf 3.KeyTime = KeyTime.FromPercent(1.0); 
x kf 3. Value = 200; 


j 
| / 


之 后 无 论 你 把 dakX 的 Duration 改 为 多 少 ， 三 个 关键 帧 都 会 将 整个 动画 分 
"nar 


4. 特殊 的 天 键 帧 


i a 的 KeyFrames 属性 的 数据 类 型 是 
DoubleKeyFrameCollection , 合 类 可 过 收 的 元 素 类 型 为 
DoubleKeyFrame 。 a 是 一 个 抽象 类 ， 前 面 使 用 的 


LinearDoubleKeyFrame5/, z& ' HJ Jk ^ X Z. — ° DoubleKeyFrame RJ Pr 
派生 类 如 下 : 


e Pu M EE 线性 变化 关键 帧 ， 目 标 属性 值 的 变化 是 直 
线性 的 、 均 匀 的 ， 即 变化 速率 不 变 


e DiscreteDoubleKeyFrame: 不 连续 变化 关键 帧 ， 目 标 属 性 值 的 变化 
是 跳跃 性 的 、 跃 迁 的 。 


e SplineDoubleKeyFrame: 样 条 函数 式 变 化 天 键 帧 ， 目 标 属性 值 的 变 
化 速率 是 一 条 贝 塞 尔 曲 线 。 


e EasingDoubleKeyFrame: 绥 神 式 变 化 关键 帧 ， 目 标 属 性 值 以 某 种 组 
冲 形 式 变 化 。 


4 个 派生 类 中 最 常用 的 是 le pi a 
( SplineDoubleKeyFrame 可 以 替代 LinearDoubleKeyFrame ) 。 使 用 
SplineDoubleKeyFrame 可 以 非常 方便 地 制 fE3E- ~ 2 画 ， 因 为 它 使 用 一 
条 贝 塞 尔 曲线 来 控制 目标 属性 值 的 变化 速率 。 这 条 用 于 控制 变化 速率 
的 贝 赛 尔 曲线 网 起 点 是 (0,0) 和 (1,1)， 分 别 映射 着 B 标 属 E 化 起 点 和 
变化 终点 ， 意 思 是 目标 属性 值 由 0% 变 化 到 10076。 这 条 贝 塞 尔 曲线 有 
WAP sg 点 ControlPoint1 和 ControlPoint2， 意 思 是 Ji a 曲线 从 起 
点 出 发 完 向 ControlPoint1 的 方 同 前 进 、 再 同 ControlPoint2 的 方 同 前 进 、 
最 后 到 达 终 点 ， 形 成 一 条 平滑 的 曲线 。 如 有 果 设 置 ControlPointl 和 
ControlPoint2 的 横 纵 坐标 值 相 等 ， 比 如 (0.0)、(0.5,0.5)、(1D)， 则 贝 塞 
尔 曲 线 成 为 一 条 直线 ， 这 上 时候 "ye d 
LinearDoubleKeyFramezé 55 ffr 的 。 当 控 制 点 的 横 纵 坐标 不 相等 时 ， 
尔 曲 线束 能 出 现 很 多 变化 。 如 图 12- 27 所 示 下 面 这 些 图 是 贝 蹇 尔 na 
制 点 处 在 典型 位 置 时 形成 的 速率 曲线 ，x1、y1 是 ControlPoint1 的 横 纵 坐 
标 ，x2、y2 是 ControlPoint2 的 横 纵 坐标 : 


图 12-27 速率 曲线 


0 帧 的 一 个 实例 。 程 序 的 XAML 代 码 如 


«Grid» 
«Button Content-" Move" VerticalAlignment-"Top" HorizontalAlignment-"Left" 
Width-"80" Height-"80" Click-"Button Click" 
«Button.RenderTransform 
«TranslateTransform x:Name-"tt" X-"0" Y="0" /> 
</Button, RenderTransform> 
«[Button? 
</Grid> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button. Click(object sender, RoutedEventArgs e) 

| 
I| 创建 动画 
DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames(); 
dakX.Duration = new Duration(TimeSpan.FromMilliseconds(1000)); 


ESI 

SplineDoubleKeyFrame kf = new SplineDoubleKeyFrame(); 
kf.KeyTime = KeyTime.FromPercent( 1); 

kf. Value = 400; 

KeySpline ks = new KeySpline(); 

ks.ControlPoint] = new Point(0, 1); 

ks.ControlPoint2 = new Point(1, 0); 

kf.KeySpline = ks; 

dakX.KeyFrames.Add(kf); 


I 执行 动画 
this.tt.BeginAnimation(TranslateTransform.XProperty, dakX); 


KEME 2 ^ f] Buttonh AAE ^ YE Button fé [8] 19 2J] o EI zB] IH. 
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控制 曲线 的 两 个 控制 点 分 别 是 (0,D 和 (1,0)， 与 图 12-17 中 的 最 后 一 幅 


致 ， 因 此 ， 目 标 属性 值 会 以 "快慢 -~ 快 ” 的 形式 变化 。 程 序 的 执行 效 
果 如 图 12-28 所 示 。 


Spline Key Frames 


图 12-28 ”程序 执行 效果 


人 


5 路径 动 画 


如 何 让 目标 对 象 治 着 一 条 给 定 的 路 径 移 动 昵 9? 答案 是 使 用 
DoubleAnimationUsingPath 类 。 DoubleAnimationUsingPath 需要 一 个 
PathGeometry 来 指明 移动 路 径 ，PathGeometry 的 数据 信息 可 以 用 XAML 
的 Path 语 法 书写 ( 详 见 前 面 章 节 ) 。PathGeometry 的 男 一 个 重要 属性 是 
Source，Source 属 性 的 数据 类 型 是 PathAnimationSource 枚 举 ， 枚 举 值 可 
W Xoo Y E Angle » Al LE EE f$ zj Ej Source /J& TE HJ EX f ox 
PathAnimationSource.X， 意 味 着 这 个 动画 关注 的 是 曲线 上 每 一 点 横 坐 标 
的 变化 ， 如 果 路 径 动 画 Source 属 性 的 取 值 是 PathAnimationSource.Y， 意 
味 着 这 个 动画 关注 的 是 曲线 上 每 一 点 纵 坐 标的 变化 ;如果 路 径 动画 
Source 属 性 的 取 值 是 PathAnimationSource.Angle， 意 味 着 这 个 动画 关注 
的 是 曲线 上 每 一 点 处 切线 方 同 的 变化 。 


下 面 这 个 示例 是 让 一 个 Button 沿 着 一 条 贝 塞 尔 曲 线 做 波浪 形 运动 。 程 序 
的 XAML 代 码 如 下 : 


«Grid x: Name-"LayoutRoot"» 
«Grid. Resources 
<|-- 移 动 路 径 --> 
«PathGeometry x:Key-"movingPath" Figures="M 0,150 C300,-100 300,400 600,120" /> 
«/Grid. Resources 
«Button Content-"Move" HorizontalAlignment-"Left" VerticalAlignment-"Top" 
Width-"80" Height-"80" Click-"Button Click" 
«Button. RenderTransform 
«TranslateTransform x:Name-"tt" X="0" Y="0" /> 
</Button.RenderTransform> 
</Button> 
</Grid> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 


Jl. A XAML 代码 中 获取 移动 路 径 数据 
PathGeometry pg = this.LayoutRoot.FindResource("movingPath") as PathGeometry; 
Duration duration = new Duration(TimeSpan.FromMilliseconds(600)); 


I| 创建 动画 

DoubleAnimationUsingPath dapX = new DoubleAnimationUsingPath( J; 
dapX.PathGeometry = pg; 

dapX.Source = PathAnimationSource.X; 

dapX.Duration = duration; 


DoubleAnimationUsingPath dapY = new DoubleAnimationUsingPath(); 
dapY.PathGeometry 7 pg; 

dapY.Source = PathAnimationSource. Y; 

dap Y.Duration = duration; 


I| 执行 动画 
this.tt.BeginAnimation Translate Transform. XProperty, dapX); 
this.tt.BeginAnimation(TranslateTransform. Y Property, dapY ); 


感 兴趣 的 话 ， 还 可 以 为 动画 添加 自动 返回 和 循环 控制 的 代码 ; 


I| 自动 返回 、 永 远 循环 

dapX.AutoReverse = true; 

dapX.RepeatBehavior = RepeatBehavior.Forever; 
dap Y.AutoReverse = true; 

dap Y.RepeatBehavior = RepeatBehavior.Forever; 


o 


程序 的 运行 效果 如 图 12-29 所 示 


8 ' Path Animation 


图 12-29 ”运行 效果 
12.4.0 场景 


场景 (Storyboard) 就 是 并 行 执行 的 一 组 动画 (前 面 讲述 的 关键 帧 动画 
则 是 串 行 执行 的 一 组 动画 ) 。 


如 果 你 是 一 位 导演 ， 当 你 对 照 剧 本 构思 一 个 场景 的 时 候 脑 子 里 想 的 一 
定 是 应 该 有 多 少 演 员 参 与 这 个 场景 、 他 们 都 是 什么 演员 、 主 角 二 配角 
了 群众 演员 分 别 什么 时 候 出 场 、 每 个 演员 应 该 说 什么 做 什么 .…… 演 员 
具体 用 谁 ， 由 场景 的 需要 来 决定 。 到 开机 的 时 候 ， 一 声 令 下 ， 所 有 演 
员 束 会 按照 预 匈 分 本 好 的 脚本 进行 表演 ， 一 个 影视 片段 融 算 孙 成 了 。 


设计 WPF 的 场景 时 情况 也 差不多 ， 先 是 把 一 组 独立 的 动画 组 织 在 一 个 
Storyboard 元 素 中 、 安 排 好 它们 的 协作 关系 ， 然 后 指定 哪个 动画 由 哪个 
UI 元 于 、 哪 个 属性 负责 完成 。Storyboard 设 计 好 后 ， 你 可 以 为 它 选 择 一 
个 恰当 的 触发 时 机 ， 比 如 按钮 按 下 时 或 下 载 开 始 时 。 一 旦 触发 条 件 被 
满足 ， 动 画 场景 就 会 开始 执行 ， 用 户 就 会 看 到 动画 效果 。 


下 面 是 一 个 Storyboard 的 例子 。 程 序 的 XAML 代 码 如 下 : 


«Grid Margin-"6"» 
人 <- 布局 控制 --> 
<Grid.RowDefinitions> 
<RowDefinition Height="38" /> 
<RowDefinition Height="38" /> 
<RowDefinition Height="38" /> 
</Grid.RowDefinitions> 
<Grid.ColumnDefinitions> 
<ColumnDefinition A 
<ColumnDefinition Width="60" /> 
«/Grid.ColumnDefinitions» 
<|-- 跑 道 ( 红 ) -> 
«Border BorderBrush-"Gray" BorderThickness-"" Grid.Row-"0"» 
«Ellipse x:Name-"balIR" Height-"36" Width-"36" Fill-"Red" 
HorizontalAlignment-"Left" 
«Ellipse.RenderTransform^ 
«TranslateTransform x: Name-"ttR" /> 
«JEllipse.RenderTransform» 
«JEllipse? 
«/Border» 


<!-- 跑 道 ( 绿 ) — 
«Border BorderBrush-"Gray" BorderThickness-"1,0,1,1" Grid.Row-"1"» 
«Ellipse x: Name-"ballG" Height-"36" Width-"36" Fill-" LawnGreen" 
HorizontalAlignment-"Left"» 
«Ellipse.RenderTransform» 
«Translate Transform x: Name-"ttG" /> 
«/Ellipse. RenderTransform^ 
«JEllipse» 
</Border> 
q-RÉ GE) -> 
«Border BorderBrush-"Gray" BorderThickness-"1,0,1,1" Grid.Row-"2"» 
«Ellipse x: Name-"ballB" Height-"36" Width-"36" Fill-"Blue" 
HorizontalAlignment-"Left"» 
«Ellipse.RenderTransform» 
«TranslateTransform x: Name-"ttB" /> 
</Ellipse.RenderTransform> 
«JEllipse» 
</Border> 
<|-- 按 钮 --> 
«Button Content-"Go!" Grid.Column="1" Grid.RowSpan="3" Click-"Button Click" /> 
</Grid> 


程序 的 UI 如 图 12-30 所 示 。 单 击 按钮 后 ， 三 个 小 球 分 别 在 不 同 的 时 间 开 
始 向 右 以 不 同 的 速度 移动 。 


图 12-30 ”程序 的 UI 
Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 
i 


Duration duration = new Duration(TimeSpan.FromMilliseconds(600)); 


I| 红色 小 球 匀速 移动 

DoubleAnimation daRx = new DoubleAnimation(); 
daRx.Duration = duration; 

daRx.To = 400; 


I| 绿色 小 球 变速 运动 

DoubleAnimationUsingKeyFrames dakGx = new DoubleAnimationUsingKeyFrames(); 
dakGx.Duration = duration; 

SplineDoubleKeyFrame kfG = new SplineDoubleKeyFrame(400, KeyTime.FromPercent(1.0)); 
kfG.KeySpline = new KeySpline(1, 0, 0, 1); 

dakGx.KeyFrames.Add(kfG); 


I| 蓝 色 小 球 变速 运动 

DoubleAnimationUsingKeyFrames dakBx = new DoubleAnimationUsingKeyFrames(); 
dakBx.Duration duration; 

SplineDoubleKeyFrame kfB = new SplineDoubleKeyFrame(400, KeyTime.FromPercent(1.0)); 
kfB.KeySpline = new KeySpline(0, 1, 1, 0); 

dakBx.KeyFrames.Add(k(B; 


I| 创建 场景 
Storyboard storyboard = new Storyboard(); 


Storyboard.SetTargetName(daRx, "ttR"); 
Storyboard.SetTargetProperty(daRx, new PropertyPath(TranslateTransform.XProperty)); 


Storyboard.SetTargetName(dakGx, "ttG"); 
Storyboard.SetTargetProperty(dakGx, new PropertyPath(TranslateTransform.XProperty)); 


Storyboard.SetTargetName(dakBx, "ttB"); 
Storyboard.SetTargetProperty(dakBx, new PropertyPath(TranslateTransform.XProperty )); 


storyboard. Duration = duration; 
storyboard.Children.Add(daRx); 
storyboard.Children.Add(dakGx); 
storyboard.Children.Add(dakBx); 


storyboard. Begin(this ; 
storyboard. Completed += (a, b) => { MessageBox.Show(ttR. X. ToString()); |; 


HERA, ERCHÍCRESCHUStoryboarddE HEA, ER f Sox 2 BS 
到 非得 使 用 C# 动 态 创建 Storyboard 的 情况 ， 不 然 我 们 都 是 用 XAML 代 码 
创建 Storyboard。Storyboard 一 般 都 放 在 UI 元 素 的 Trigger 里 ，Trigger 在 触 
发 时 会 执行 <BeginStoryboard> 标 签 中 的 Storyboard 实 例 : 


«Button Content-"Go!" Grid.Column-"l" Grid. RowSpan-"3"» 
«Button.Triggers» 
«EventTrigger RoutedEventz"Button.Click"» 
«BeginStoryboard» 
«Storyboard Durationz"0:0:0.6"» 
<!.. 红 色 小 球 动画 .-> 
«DoubleAnimation Durationz"0:0:0.6" To="400" 
Storyboard. TargetName="ttR" 
Storyboard. TargetProperty="X" /> 
<!-- 绿 色 小 球 动画 -> 
«DoubleAnimationUsingKeyFrames Durationz"0:0:0.6"" 
Storyboard.TargetNamez"ttG" 
Storyboard. TargetPropertyz"X"» 
«SplineDoubleKeyFrame KeyTimez"0:0:0.6" Valuez "400" 
KeySplinez"1,0,0,1" /> 
«[DoubleAnimationUsingKeyFrames» 
<!-- 红 蓝 小 球 动画 -> 
«DoubleAnimationUsingKeyFrames Durationz"0:0:0.6" 
Storyboard. TargetName="ttB" 
Storyboard. TargetProperty="X"> 
«SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="400" 
KeySplinez"0,1,1,0" /» 
«[DoubleAnimationUsingKeyFrames» 
«fStoryboard» 
«[BeginStoryboard» 
«[EventTrigger» 
«[Button.Triggers» 


«/Button? 


除了 为 Button 添 加 了 Trigger 并 去 掉 对 Click 事 件 的 订阅 之 外 ，XAML 人 代码 
其 他 的 部 分 不 做 任何 改动 。 可 以 看 到 ， 使 用 XAML 代 码 编写 Storyboard 

画 比 用 C# 代 码 简 洁 得 多 一 -Blend 生 成 的 Storyboard 代 码 与 之 非常 类 
M e 


